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

Question

我希望输入字段在$dirty和$invalid都为真时具有红色bg，但您只能一个接一个地执行此操作，这是不正确的。

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"/>