（中級）CSS層疊規則要點

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第2章。

查理版簡單層疊要點

在這個查理版裡，只要記住三條規則就夠了。這三條規則適合所有情況。

規則一：包含ID的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標籤名的選擇符。

規則二：如果幾個不同來源都為同一個標籤的同一個屬性定義了樣式，行內樣式勝過嵌入樣式，嵌入樣式勝過連結樣式。在連結的樣式表中，具有相同特指度的樣式，後宣告的勝過先宣告的。

規則一勝過規則二。換句話說，如果選擇符更明確（特指度更高），無論它在哪裡，都會勝出。

規則三：設定的樣式勝過繼承的樣式，此時不用考慮特指度（即顯式設定優先）。下面簡單解釋一下規則三。比如下面的標記

<div id="cascade_demo">
   <p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>

和下面的規則

div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2 （高特指度）

會導致單詞“weak”變成藍色，因為它從父元素p那裡繼承了這個顏色值。

但是，只要我們再給em新增一條規則

em {color:red;}
0 - 0 - 1 （低特指度）

em就會變成紅色。因為，雖然它的特指度低（0-0-1），但em繼承的顏色值，會被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規則的特指度高（2-0-2）也沒有用。