溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何理解權重和層疊規則決定了CSS樣式優先級”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
代碼如下:
<span style=”font-size:14px;”><html>
<head>
<style type=”text/css”>
#redP p {
/* 權值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id=”redP”>
<p class=”red”>red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html></span>
一、基本的優先級規則
比較同一級別的個數，數量多的優先級高，如果相同即比較下一級別的個數，至于各級別的優先級如下：
important > 內聯 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承
二、CSS權重規則
在《頁面重構中的模塊化設計》中提到，影響CSS樣式權重，有兩個重要因素：
A：樣式的優先級跟樣式定義的順序有關
B：權值的大小跟選擇器的類型和數量有關
一般來說，在同一個CSS文件中，如果有兩個同名的樣式，則后定義的會覆蓋先定義的。選擇器類型的優先級見(一)。
那么，CSS的權重是怎么算的呢？
一個selector的權重表示方式：0.0.0.0，按照計算規則給每位填充數字，對應位置相等，則比較下一位。
權重的計算規則如下：（為方便，用A.B.C.D代替各位置的值）
1、內嵌樣式：A=1，B=C=D=0（即1.0.0.0）
2、ID樣式：selector中帶幾個ID,第2位就加幾個1 如#header{color:red}，就是A=C=D=0,B=1(即0.1.0.0)
3、類,偽類,以及屬性的個數就是第三位的值：
.a.b[type="text"]:hover{}，選擇器中有2個類,1個屬性,1個偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)
4、偽元素和標簽元素的個數就是第四位的值
p:first-letter，有一個標簽元素p和偽元素first-letter,值為2,A=B=C=0,D=2（即0.0.0.2）
5、通配符和繼承得到的CSS屬性對權重沒有影響
三、幾個示例
針對以上，看以下幾個示例
1、.a .b .c {color:red;} //0.0.3.0 說明：只有三個類
2、*{…} //0.0.0.0 說明：通配符對權重沒有影響
3、.a .b a {color:green} //0.0.2.1 說明：兩個類和一個標簽
4、#hid {color:black;} //0.1.0.0 說明：只有一個ID
“如何理解權重和層疊規則決定了CSS樣式優先級”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
