ng-valid [必需]，.ng-valid.equired之间有什么区别

Question

我正在通过https://angular.io/docs/ts/latest/guide/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 [必需]，.ng-valid。同时使用的选择器，并且不能只用其中一个代替？

Answer 1

.ng-valid[required]规则对

有效

<input class="ng-valid" required>

.ng-valid.required规则对

有效

<input class="ng-valid required">

这两个规则均对

有效

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

现在您可以选择要使用的解决方案，并在CSS上删除不需要的规则。