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

Question

我正在浏览 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 选择器，我们不能只用其中一个来替换它吗？

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 上不必要的规则。