評分和排名規則的特異性

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