css層疊是什麼
- 青灯夜游原創
- 2021-04-08 17:14:405520瀏覽
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中文網其他相關文章！