评分和排名规则的特异性

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; 
}