В чем разница между 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 селекторов используются в одно и то же время и не могут заменить это только одним из них?

Ответы

Ответ 1

Правило .ng-valid[required] допустимо для

<input class="ng-valid" required>

Правило .ng-valid.required справедливо для

<input class="ng-valid required">

Оба правила действительны для

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

Теперь вы можете выбрать, какое решение вы хотите использовать, и удалить необязательные правила для вашего CSS.