前面的話
層疊樣式表CSS最基本的一個特性就是層疊。衝突的宣告通過層疊進行排序，由此確定最終的文件表示。而這個過程的核心就是選擇器及其相關宣告的特殊性、重要性、來源及繼承機制。本文將詳細介紹CSS層疊
特殊性
選擇器的特殊性由選擇器本身的元件確定。特殊性值表述為4個部分(如：0,0,0,0)。下面來介紹不同的選擇器的特殊性值
1、內聯樣式 -> 1,0,0,0
2、ID屬性值 -> 0,1,0,0
3、類屬性值、屬性選擇或偽類 -> 0,0,1,0
4、元素或偽元素 -> 0,0,0,1
5、結合符和通配選擇器 -> 0,0,0,0
特殊性的值是從左向右排序的，特殊性值1,0,0,0大於以0開頭的所有值，而無論後面是什麼數。在一組規則中，特殊性最高的規則勝出
h1{} -> 0,0,0,1
p em{} -> 0,0,0,2
.grape{} -> 0,0,1,0
*.bright{} -> 0,0,1,0
p.bright em.dark{} -> 0,0,2,2
#id121{} -> 0,1,0,0
div#side *[href]{} -> 0,1,1,1
重要性
有時某個宣告可能非常重要，超過了所有其他宣告，CSS2.1稱之為重要宣告。重要宣告在宣告的結束分號之前插入!important來標誌，如果!important放在宣告的任何其他位置，整個宣告都將無效
如果一個宣告是重要宣告，則超過所有的非重要宣告
繼承
繼承是從一個元素向其後代元素傳遞屬性值所採用的機制。基於繼承機制，樣式不僅可以應用到指定的元素，還會應用到它的後代元素
在兩個比較特殊的情況需要注意：一個是在HTML中，應用到body元素的背景樣式可以傳遞到html元素；另一個是<a>標籤不會繼承父元素的文字樣式
[注意]繼承的屬性沒有特殊性
來源
CSS按來源的不同分為3類：author(作者)、user(使用者)、user agent(代理)
1、author(作者): 來自文件的樣式檔案。我們平常所寫的樣式基本上都是這一類的
2、user(使用者): 使用者指定的自定義的樣式檔案。一些UA允許使用者匯入自定義的樣式檔案
3、user agent(代理): 一些UA(如：瀏覽器)要為某些元素預設一個預設的樣式，以方便閱讀
關於使用者CSS因為不常見，可能一些朋友不太理解。IE可以通過Internet 選項 -> 外觀 -> 輔助功能 -> 使用者樣式表來指定樣式檔案。Chrome可以使用Stylish擴充套件來實現
層疊
CSS層疊樣式表的層疊特性就是讓樣式層疊在一起，通過特殊性、重要性、來源及繼承機制來排列層疊樣式的順序及選出勝出者
1、首先，按照來源及重要性排序。在不考慮重要性的前提下，優先順序順序為：author(作者) > user(使用者) > user agent(代理)。但是，如果考慮重要性，則user(使用者)的優先順序大於author(作者)的優先順序，這樣做是試圖平衡author(作者)和user(使用者)。所以，最終的優先順序排序為：user(使用者)!important > author(作者)!important > author > user > user agent
2、接著，對於非重要宣告來說，按照特殊性排序。特殊性越高的規則，權重越大
3、最後，如果特殊性相同，則按照出現順序排序。宣告在樣式表或文件中越靠後出現，權重越大。如果樣式表中有通過@import匯入的樣式表，一般認為出現在匯入樣式表中的宣告在前，主樣式表的所有宣告在後