评分和排名特异性规则

Question

我的样式表中有两个竞争规则：

#parent > div {
    color: blue;
}

#child {
    color: red;
}

以下是相关的HTML：

<div id="parent">
 <div id="child">What color is this text?</div>
 <div>This should just be blue</div>
 <div>Also should be blue</div>
</div>

为什么#child为蓝色而不是红色？

我不确定我是否正确应用了评分系统。我是这样做的：

• 规则＃1有一个ID和一个标记，因此其分数为[0, 1, 0, 1]
• 规则＃2只有一个ID，因此其分数为[0, 1, 0, 0]
• 因此规则＃1获胜，而且是蓝色

但是这个对我来说似乎错了 - 第一条规则匹配多个元素;第二条规则只能匹配一条！那么第二条规则不是更具体吗？

Answer 1

  

但是这个对我来说似乎错了 - 第一条规则匹配多个元素;第二条规则只能匹配一条！那么第二条规则不是更具体吗？

完全没有。仅仅因为选择器匹配较少的元素并不会使它更具体。

选择器匹配是在逐个元素的基础上完成的，而不是按规则进行的。由于有一个更具体的选择器与您的元素#child匹配，即#parent > div，因此该规则优先，就是这样。

这似乎与直觉相反，但这就是它的工作原理。解决此问题的一种方法是将#parent添加到您的第二条规则中：

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}