CSS層疊是指多種CSS樣式的疊加,CSS樣式在針對相同元素配置相同屬性時,依據層疊規則(權重)來處理衝突,選擇應用權重高的CSS選擇器所指定的屬性,一般也被描述為權重高的覆蓋權重低的,因此也稱為層疊。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS層疊性(重要)
指多種CSS樣式的疊加。
是瀏覽器處理衝突的一個能力,如果一個屬性透過兩個相同選擇器設定到同一個元素上,那麼這個時候一個屬性就會將另一個屬性層疊掉。
原則:
1、樣式衝突,遵循的原則是就近原則,也就是CSS的書寫位置。
2、樣式不衝突,不會層疊
CSS繼承性
# 寫CSS樣式表時,子標籤會繼承父標籤的某些樣式,如文字顏色和字號。想要設定一個可繼承的屬性,只需要將它套用到父元素。
注意:適當地使用繼承可以簡化程式碼,降低CSS樣式的複雜度。子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的都可以繼承,以及color屬性)
CSS優先權
# 定義CSS樣式時,經常出現兩個或更多規則應用在同一元素上,這時就會出現優先順序的問題。
在考慮權重時,初學者還需要注意一些特殊的情況,具體如下:
繼承樣式的權重為0.即在嵌套結構中,不管父元素樣式的權重多大,被子元素繼承時,他的權重都是0,也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素,其行內樣式的權重非常高,可以理解為遠大於100.總之,他擁有比上面提到的選擇器都大的優先權。
權重相同時,CSS遵循就近原則,也就是說靠近元素的樣式具有最大的優先級,或者說排在最後的樣式優先級最大。
CSS定義了一個!important指令,該指令被賦予最大的優先權。也主濁說不管權重如何以及樣式位置的遠近,! important都具有最大優先權。
CSS特殊性(specificity)
關於CSS權重,需要一套公式來計算,由四位的數組成,值從左到右,左面的最大,一級大於一級,數位之間沒有進制,級別之間不可超越。
繼承或*的值:0,0,0,0
每個元素(標籤)值:0,0,0,1
每個類,偽類值為:0,0, 1,0
每個ID為:0,1,0,0
每個行內樣式值:1,0,0,0
每個!important值:無窮大
1、數位之間沒有進位。
2、經由繼承的影響的,權重為0,【即樣式沒有攜帶有文字標籤】如:
.colorRed{ color:#f00; /* 没有选中p标签,所以只是通过继承影响的,权重为0 */ } p { color:#0f0; /* 权重为1 */ } <div class="colorRed"> <p>颜色</p> </div>
程式碼如下:##
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #father #son{ /*权重为0,2,0,0*/ color:blue; } #father p .c2{ /*权重为0,1,1,1*/ color:black; } div .c1 p .c2{ /*权重为0,0,2,2*/ color:red; } #father { color:green !important; /*继承的权重为0*/ } </style> </head> <body> <div id="father"> <p id="son">颜色</p> </div> </body> </html>
效果如下:
(學習影片分享:css影片教學)
以上是css層疊是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!