css – ng-valid [required],.ng-valid.required之间有什么区别？

我正在通过 https://angular.io/docs/ts/latest/guide/forms.html作为运动,然后我通过这段代码：

.ng-valid[required],.ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

为什么同时使用了.ng-valid [required],.ng-valid.required选择器,而不能只替换其中的一个？

解决方法

.ng有效的[必需]规则适用于

<input class="ng-valid" required>

.ng-valid.required规则适用于

<input class="ng-valid required">

这两个规则都适用于

<input class="ng-valid required" required>

现在,您可以选择要使用哪个解决方案,并删除CSS上不必要的规则.