3

我一直在尝试使用 Bootstrap 的表单样式来验证 AngularJS 的电子邮件，并遇到了这个 CSS 块。

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}

我注意到第二个 :focus 给予它更高的优先级，但我不禁认为它还有更多的意义？

谢谢

4

1 回答 1

3

以下是规范中关于计算特异性的内容：

选择器的特异性计算如下：

  • 计算选择器中 ID 选择器的数量 (= a)
  • 统计选择器中的类选择器、属性选择器和伪类的数量（= b）
  • 计算选择器中类型选择器和伪元素的数量 (= c)
  • 忽略通用选择器

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

There's nothing written about uniqueness, so writing the pseudo-class twice does make the selector more specific, just like p.foo.foo is more specific than p.foo, yet it matches the exact same elements.

于 2013-06-30T01:55:50.370 回答