css繼承與層疊的詳解

前面介紹如何利用文件結構和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中文網！