css - 为什么较早的 CSS 规则会覆盖较晚的规则？

Question

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

Answer 1

您应该阅读有关 CSS 特异性的内容。

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

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.

• Element, Pseudo Element: d = 1 – (0,0,0,1)
• Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
• Id: b = 1 – (0,1,0,0)
• Inline Style: 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 文档中如何排序，第一个会覆盖第二个。