有什么区别：焦点：必需：无效：焦点和：焦点：必需：无效？

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;
}

我注意到第二个：焦点给了它更高的优先级，但我不禁想到它还有更多的东西吗？

由于

Answer 1

以下是关于calculating specificity的规范：

  

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

     

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

     

否定伪类中的选择器与其他选择器一样，   但否定本身并不算作伪阶级。

     

连接三个数字a-b-c（在具有大数字的数字系统中）   base）给出了特异性。

     

注意：允许重复出现相同的简单选择器并增加特异性。

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