html - 如何在 CSS 中组合两个 Angularjs 表单验证指令条件？

Question

当 $dirty 和 $invalid 都为真时，我希望输入字段有红色背景，但你我只能一个一个地做，这是不对的。

input.ng-dirty && input.ng-invalid {
    background-color:pink;
}

Answer 1

如果您希望两者都为真，则必须执行以下操作:

input.ng-dirty.ng-invalid {
    background-color:pink;
}

<input class="ng-dirty ng-invalid"/>
<input class="ng-invalid"/>
<input class="ng-dirty"/>

使用此代码，如果在元素上设置了任一类，则应用样式。

input.ng-dirty, input.ng-invalid {
    background-color:pink;
}

<input class="ng-dirty"/>
<input class="ng-invalid"/>