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