:focus:required:invalid:focus和:focus:required:invalid有什么区别？

Question

我一直在尝试使用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给了它更高的优先级，但我情不自禁地认为还有更多的东西？

谢谢

Answer 1

以下是该规范对calculating specificity的描述

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

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

negation伪类中的选择器和其他类一样被计算在内，但是negation本身并不被算作伪类。

连接三个数字a-b-c (在具有大基数的数字系统中)提供了特异性。

注意:允许重复出现相同的简单选择器，这确实会增加特异性。

没有写任何关于唯一性的东西，所以编写两次伪类确实会使选择器更具体，就像p.foo.foo is more specific than p.foo一样，但它与完全相同的元素相匹配。