首頁  >  文章  >  web前端  >  css繼承與層疊的詳解

css繼承與層疊的詳解

高洛峰
高洛峰原創
2017-03-04 16:51:051270瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn