为什么早期的CSS规则会覆盖以后的规则？

Question

在我的样式表中，.four-across li在第8806行定义width: 174px;。在第9603行的规则下方，.no-search-results定义width: auto;。但是，174px规则覆盖了.no-search-results的元素。为什么会这样？

Answer 1

你应该阅读CSS特异性。

.four-across li比.no-search-results更具体，因此它具有更高的重要性级别。

  

通过计算css的各种组成部分来计算特异性   并以（a，b，c，d）的形式表达它们。这将更加清晰   例如，但首先是组件。

     

  
• 元素，伪元素：d = 1 - （0,0,0,1）
  
• 类，伪类，属性：c = 1 - （0,0,1,0）
  
• Id：b = 1 - （0,1,0,0）
  
• 内联样式：a = 1 - （1,0,0,0）
  

Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

文档顺序仅在给定的特异性完全相同时才有意义。在你的例子中，第一个选择器是（0,0,1,1），第二个是（0,0,1,0），所以第一个选择器会覆盖第二个选择器，无论它们如何在CSS文档中排序。

Answer 2

读：

• Reviewing CSS Style Priority Level

• Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

在这种情况下，因为类和元素类型比类更具体，并且它比更受青睐>顺序

Answer 3

有两个原因：

1. 扫描的最后一条规则优先于先前扫描的规则，其他条件相同。
2. 规则越具体（两个说明符而不是一个），优先级越高。