原文：http://segmentfault.com/blog/dopppler/1190000002427029
爲了解決衝突，確定哪條規則勝出並最終被應用，CSS提供了三種機制：繼承、層疊和特指。
1.繼承
CSS 中的祖先元素會向後代傳遞一樣東西：CSS屬性的值。可以繼承的屬性相當一部分都個文本有關，比如顏色、字體、字號。然而，也有很多 CSS 屬性不能繼承，因爲繼承這些屬性沒有意義。這些不能繼承的屬性主要涉及元素盒子的定位和顯示方式，比如邊框、外邊距、內邊距。
注意：由於字體和文本樣式是可以繼承的，所以在使用相對字體單位（如百分比和 em）時要格外小心。如果某個標籤的字體大小被設置爲 80%，而它的一個後代的字體大小也被設置爲 80%，那麼該後代中文本最終的字體大小將是 64%（ 80%的 80%）。這有時候可能並不是你想要的結果。
2.層疊
層疊，就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標籤特定屬性值的多個來源，確定最終使用哪個值。
提示：層疊是 CSS 的核心機制，理解了它才能以最經濟的方式寫出最容易改動的 CSS，讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們能根據需要更改文檔的顯示效果（比如整體調整字號）。
2.1 樣式來源
以下是瀏覽器層疊各個來源樣式的順序：
- 瀏覽器默認樣式
- 用戶樣式表
- 作者鏈接樣式表（按照它們鏈接到頁面的先後順序）
- 作者嵌入樣式
- 作者行內樣式
其中，用戶 是指有特別需求的用戶，例如視障人士，他們可以通過用戶樣式表，強制瀏覽器加載的所有網站都以更大的字號，更容易分辨的顏色顯示內容。而 作者，就是網頁設計師（你）。
瀏覽器會按照上述順序依次檢查每個來源的樣式，並在有定義的情況下，更新對每個標籤屬性值的設定。整個檢查更新過程結束後，再將每個標籤以最終設定的樣式顯示出來。
2.2 層疊規則
-
層疊規則一：找到應用給每個元素和屬性的所有聲明。
-
層疊規則二：按照順序和 權重 排序。
-
層疊規則三：按 特指度（specific）排序。
-
層疊規則四：順序決定權重。
提示：聲明也可以有權重，
空格!important 分號( ;)用於加重聲明的權重。
例如：p {color:green !important; font-size:12pt;}
3.特指
計算選擇符的特指度
- 一個簡單的記分規則，即對每個選擇符都要按下面的 ICE 公式計算三個值：
I-C-E（ID-Class-Element）
說明：1.三個字母間的短橫線是分隔符，並非減號；2.這並非真正的三位數，只不過大多數情況下把結果看成一個三位數沒問題，三位數最大的勝出。
但是，千萬得知道 0-1-12 與 0-2-0 相比，仍然是 0-2-0 的特指度更高。
- 針對這個公式的計分辦法如下：
1.選擇符中有一個ID，就在I的位置加1；
2.選擇符中有一個類，就在C的位置加1；
3.選擇符中有一個元素（標籤）名，就在E的位置上加1；
4.得到一個三位數。
可以通過下面的例子來理解：
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
在此，每個選擇符都比前一個選擇符的特指度更高。
4.查理版簡單層疊要點
在這個查理版裏，只要記住三條規則就夠了。這三條規則適合所有情況：
-
規則一： 包含 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）也沒有用。
參考資料