CSS層疊規則：
1、找出所有相關的規則，這些規則都包含與一個給定元素匹配的選擇器。
2、按權重（!important）和來源對應用到給定元素的所有聲明進行排序。
3、按特殊性對應用到給定元素的所有聲明進行排序，有較高特殊性的元素權重要大於有較低特殊性的元素，0特殊性比無特殊性要強（繼承）。
4、按出現順序對應用到給定元素的所有聲明進行排序，后面出現的聲明權重要大於前面出現的聲明，即后定義的樣式會覆蓋前面定義的樣式。（適用於特殊性一樣的時候）
解讀：
一、權重和來源
來源：
1、創作人員（開發者）
1）、外部樣式，即<link>引用的CSS后綴文件；
2）、內部樣式，即寫在<style></style>標簽內的樣式；
3）、內聯樣式，即直接寫在style屬性內的樣式（網頁設計強調結構、表現、行為三者分離，不建議使用。）；
2、讀者（用戶自定義樣式：一些頁面中會提供一些讓用戶自定義字體大小顏色等的快捷鍵；）
3、用戶代理（最主要的是：瀏覽器默認樣式）
權重（由大到小的順序排序）：
1）讀者的重要聲明（!important）
2）創作人員的重要聲明（!important）（高於內聯樣式！）
3）創作人員的正常聲明
4）讀者的正常聲明
5）用戶代理的聲明
二、樣式繼承
文檔應用聲明還有一個很重要的概念，即繼承：它依賴於祖先-后代的關系的，繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。
CSS中的繼承也是有選擇性的，並不是全部CSS都繼承，大多數框模型屬性都不能繼承，例如，內、外邊距、背景和邊框等。
例如：一個body定義了的顏色值也會應用到段落的文本中。
三、選擇器的特殊性
1、對於內聯樣式，特殊性首位加1，即1，0，0，0。
2、對於選擇器中出現的ID屬性值，加0，1，0，0， 有多少個ID值就在第二位加幾位。
3、對於選擇器中出現的類屬性值，屬性選擇及偽類，加0，0，1，0，共出現多少個就在第三位加幾位。
4、對於選擇器中出現的元素，以及偽元素，加0，0，0，1，共出現多少個就在第四位加幾位。
5、通配符對特殊性沒有任何貢獻，即特殊性是0，0，0，0。
6、結合符沒有特殊性，連0特殊性也沒有。
7、繼承的CSS完全沒有特殊性，連0特殊性也沒有。
注意:因為通配符*的特殊性是0， 而繼承的CSS是沒有特殊性的，連0也沒有，所以，通配符的權重要大於繼承。
特殊性計算示例：
h1{color:red;} /*specificity = 0,0,0,1*/ p em{color:purple;} /*specificity = 0,0,0,2*/ .grape{color:yellow;} /*specificity = 0,0,1,0*/ *.grape{color:yellow;} /*specificity = 0,0,1,0*/ p.grape em.dark{color:maroon;} /*specificity = 0,0,2,2*/ #grape{color:blue;} /*specificity = 0,1,0,0*/ div#grape *[href] {color:silver;} /*specificity = 0,1,1,1*/ html > body > table tr[id="totals"] td ul > li{color:maroon;} /*specificity = 0,0,1,7*/ h1 + p{color:black;} /*specificity = 0,0,0,2*/