Web技術基礎
<style>
#main p { color: red; }
.content p { color: green; }
p.note { color: blue; }
</style>
<div id="main" class="content">
<p class="note">Hello</p>
</div>假設沒有其他樣式設定。在上方的HTML中，「Hello」文字的顏色為下列何者？
- A紅色（red）
- B綠色（green）
- C藍色（blue）
查看答案與解析
正確答案：A. 紅色（red）
多條規則套用到同一元素時，選擇器權重（specificity）較高的規則優先。權重以（ID的數目, 類別・屬性・虛擬類別的數目, 元素的數目）的組合比較，#main p 為 (1, 0, 1)，.content p 與 p.note 都是 (0, 1, 1)，因此採用含有ID的 #main p 的紅色。權重相同的規則之間，寫在後面的規則優先。直接寫在style屬性中的設定或 !important 比這些更優先。
- A. 正確。含有ID的 #main p 權重 (1, 0, 1) 最高。
- B. .content p 的權重為 (0, 1, 1)，低於含有ID的規則。而且它寫在權重相同的 p.note 之前。
- C. p.note 寫在最後，但權重 (0, 1, 1) 低於含有ID的規則，因此不會被採用。若沒有ID的規則，就會是藍色。