前面介紹如何利用文件結構和css選擇器為元素應用各種豐富的樣式，今天來好好聊聊css的層疊和繼承，先說說概念。
繼承：一個元素向其後代元素傳遞屬性值所採用的機制，說的通俗點，就是元素的某些屬性可以透過繼承而傳遞給子元素的。
如：
# 測試繼承這裡不是span中的內容
p{color:red}，這裡便會看到p元素和審判元素中的文字都變成紅色，因為p元素的屬性被span繼承過來了。但是有的屬性是無法透過繼承來傳遞的，
如border就不會透過繼承而獲得。其實繼承很好理解，但要配合層疊一起理解。
層疊：確定一個元素究竟該用哪些樣式時，就需要把繼承和宣告的特殊性拿來一起考慮，從而該啟用哪一個css樣式，這個過程就被稱為層疊。
上面提到了特殊性，那我們就來重點看看。
先拋出一個問題，下面2對規則，哪一條會獲勝?
h1{color:red}
body h1{color:blue}
h2{color:red}
h2.color{color:green}
上面的2對規則中，顯然只能有一個勝出，然而哪一個該勝出嘞？答案就在每個選擇器的特殊性。
一個選擇器的具體特殊性如下：
1.對於規則中給定的每個ID屬性值，特殊性加0,1 ,0,0
2.對於規則中每個類別選擇符合屬性選擇符以及偽類，特殊性加0,0,1,0
#3 .對於規則中每個元素和偽元素，特殊性0,0,0,1
4.結合符和通配符對特殊性沒有任何貢獻。
5.內聯樣式的特殊性加1,0,0,0
6.繼承的屬性沒有特殊性，甚至連0特殊性都沒有，所以要低於通配符的。
7.!important總會勝出。
所以對於上面的兩組規則就有了結果：
h1{color:red} 0,0,0,1
body h1{color:blue} 0,0,0,2
h2{color:red} # 0,0,0,10,0,0,10,0,0,10,0,0
h2.color{color:green} 0,0,1,0
所以red和green會生效。
於是，層疊的規則如下：
#1.找出你程式碼裡面所有的選擇符。
2.規則的顯示權重排序和起源排序，標記！ important的樣式最優先，且有三種起源：製作者，讀者，使用者代理。
3.元素宣告的特殊性排序。
4.元素宣告的出現順序排序。
更多css繼承和層疊的詳解相關文章請關注PHP中文網！
