css繼承和層疊的詳解

在前面介紹了如何利用文檔結構和css選取器為元素應用各種豐富的樣式，今天來好好聊聊css的層疊和繼承，先說說概念。

繼承：一個元素向其後代元素傳遞屬性值所採用的機制，說的通俗點，就是元素的某些屬性可以通過繼承從而傳遞給子項目的。

如：

<p><span>測試繼承</span>這裡不是span中的內容</p>

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,1
h2.color{color:green} 0,0,1,0
所以red和green會生效。

於是，層疊的規則如下：

1.找出你代碼裡面所有的選擇符。

2.規則的顯示權重排序和起源排序，標記！important的樣式最優先，且有三種起源：製作者，讀者，使用者代理程式。

3.元素宣告的特殊性排序。

4.元素宣告的出現順序排序。

更多css繼承和層疊的詳解相關文章請關注topic.alibabacloud.com！

