溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css層疊指的是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
CSS層疊是指多種CSS樣式的疊加，CSS樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理沖突，選擇應用權重高的CSS選擇器所指定的屬性，一般也被描述為權重高的覆蓋權重低的，因此也稱作層疊。
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層疊指的是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
