css - 似乎 css 优先级比 w3.org 解释的要多

Question

我有两种简单的 CSS 样式：

div
{
color: white;
}    

body
{
color: gray;
}

其中每一个的优先级值为 0,0,0,1。因此，根据规则，第二个样式应该覆盖第一个样式，并且包含在 div 中的所有文本都应该是灰色而不是白色。这不是发生的事情；div 样式无论其位置如何都优先。据推测，有些地方说一个更具体的元素优先于一个不太具体的元素或类似的元素，但我找不到任何这样说的东西。谁能告诉我这种行为可能记录在哪里？

Answer 1

您是正确的，这两个规则具有相同的特异性 - 0,0,0,1 - 但是它们没有以相同的方式定位 div 元素。

body 规则（灰色文本）匹配 div，但只能通过继承 - div 规则（白色文本）直接匹配 div。

当一个元素从其父元素继承一个值时，它继承了它的计算值，并且正如 W3C 规范中所声明的，每个元素都经过四步计算。

http://www.w3.org/TR/CSS2/cascade.html#value-stages

属性的最终值是四步计算的结果：值通过规范确定（“指定值”），然后解析为用于继承的值（“计算值”），然后转换必要时转化为绝对值（“使用值”），最后根据当地环境的限制进行转化（“实际值”）。

所以在 div 上，白色是唯一的“指定”值，因此优先。灰色只是一个计算值，通过从 body 标签继承而来。

至少，这就是我对规范的解释。