css - 为什么前面的 CSS 规则会覆盖后面的规则？

Question

在我的样式表中，在第 8806 行.four-across li定义。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)

通过了解 CSS 中的样式优先级：特异性、继承和级联

仅当给定的特异性完全相同时，文档顺序才重要。在您的示例中，第一个选择器是 (0,0,1,1)，第二个是 (0,0,1,0)，因此第一个选择器会覆盖第二个选择器，无论它们在 CSS 文档中如何排序。

Answer 2

读：

• 审查 CSS 样式优先级

• 理解 CSS 中的样式优先级：特异性、继承和级联

在这种情况下，这是因为class和element type比class更具体，并且比order更受青睐。

Answer 3

两个原因：

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