css - 'required' css 选择器语法

Question

我在 https://angular.io/docs/ts/latest/guide/forms.html 中找到了以下 CSS

.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] 是一些新的 CSS 语法吗？

Answer 1

使用 CSS attribute selector *[required]您可以使用属性 required 来格式化元素.语法不是新的。请参阅以下示例:

input[required] {
  border:1px solid red;
}

<input type="text" required/>
<input type="text"/>

这经常用在 <form> 中s 来定义一些元素，例如 <input>按要求。使用 CSS 属性选择器 *[required]您可以格式化这些必需的元素。

---

您还可以使用 :required用于格式化所需元素的伪类:

input:required {
  border:1px solid red;
}

<input type="text" required/>
<input type="text"/>

The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/:required