不尋常的CSS特異性行爲

Question

我已經與CSS工作了很長時間，我認爲我很好地理解了特異性，但是這個例子讓我感到困惑;這是在深夜，所以我可能會丟失一些東西明顯：

.class span { 
 
    color: blue; 
 
} 
 

 
section#id { 
 
    color: beige; 
 
}

<div class="class"> 
 
    <section id="id"> 
 
    <span>Test</span> 
 
    </section> 
 
</div>

Specificity爲section#id是101，而.class span是11，最重要的是，第二條規則是即使經過規定第一個。

我錯過了什麼明顯的東西？

Answer 1

您沒有針對第二個選擇器的跨度。該顏色只能級聯到顏色屬性設置爲inherit（默認值）的元素。

Answer 2

第一條規則縮小到span標籤。第二條規則是父級的更高級別。所以，是的，.class span將優先，因爲它正在打實際的標籤。