css層疊是什麼

青灯夜游
發布: 2023-01-04 09:35:23
原創
5496 人瀏覽過

CSS層疊是指多種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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板