三分鐘搞懂CSS 權重

CSS · 發表 2018-12-17 11:03:59

摘要：切圖時是不是經常性的寫了樣式無效呢？半死不得其解吧為什麼自己的樣式老是被抵掉了呢？為什麼老是用important 來搞事呢？我猜應該是CSS權重問題，沒有理解透徹吧下來用幾個例子說明下CSS的權重。 <p class='p2'...

切圖時是不是經常性的寫了樣式無效呢？半死不得其解吧

為什麼自己的樣式老是被抵掉了呢？為什麼老是用important 來搞事呢？

我猜應該是CSS權重問題，沒有理解透徹吧

下來用幾個例子說明下CSS的權重。

<p class='p2' id="p2"> daasd</p>
複製程式碼

p {
color: red; /* 權重 1 */
}複製程式碼

.p2 {
color: yellow; /* 權重 10 */
}複製程式碼

#p2 {
color: blue; /* 權重 100 */
}複製程式碼

<p style="color:pink;" class='p2' id="p2"> daasd </p> // 權重1000 
許多人會問，難道不會被後面的class id 覆蓋掉？ 回答: 不會 行內權重大於類和ID複製程式碼

p {
color: red !important;/* 權重 1 + important */所以現在他最大，同時也大於行內式 style=""
}
.p2 {
color: yellow; /* 權重 10 */
}
#p2 {
 color: yellow; /* 權重 100 */
}

複製程式碼

<p style="color:pink !important;" class='p2' id="p2"> daasd </p>// 無人能超越 行內 !important複製程式碼

<div id="div">
<p class="p2" id="p3">daasd</p> //當然也會存在多個標籤巢狀 
</div>複製程式碼

#div p { /* 此時權重為 100 + 1 */ 大於下面兩個
color:red;
}
.p2 { /* 權重為 10 */ 
color:yellow;
} 
#p3 { /* 權重為 100 */
color:blue;
}
複製程式碼

又或者是一個更復雜的巢狀呢？

<div id="div" class="div-class">
<div id="div1" class="div1-class">
<div id="div2" class="div2-class">
<div id="div3" class="div3-class">
<p class="ap" id="p">daasd</p>
</div>
</div>
</div>
</div>複製程式碼

#div p { /* 權重 100 + 1*/
color: red;
}
/* #div p { /* 權重 100 + 1 + important*/ 加上我最大
color: red !important;
} */

#div #div1 p { /* 權重 100 + 100 + 1*/
color: pink;
}
#div #div1 #div2 p { /* 權重 100 + 100 + 100 + 1*/
color: yellow;
}
#div #div1 #div2 #div3 p { /* 權重 100 + 100 + 100 + 100 + 1*/
color: blue;
}
複製程式碼

.div-class #div1 .div2-class .div2-class p { /* 10 + 100 +10 + 10 + 1 */
color:red;
}
#div .div1-class #div2 .div3-class p { /* 100 + 10 + 100 + 10 + 1 */
color:blue;
}
#div #div1 #div2 .div3-class p { /* 100 + 100 + 100 + 10 + 1 */
color:pink;
}
#div #div1 .div2-class .div3-class p { /* 100 + 100 + 10 + 10 + 1 */
color:black;
}
#div #div1 .div2-class .div3-class #p { /* 100 + 100 + 10 + 10 + 100 */
color:yellow;
}
#div #div1 .div2-class .div3-class .ap { /* 100 + 100 + 10 + 10 + 10 */
color:green;
}
#div #div1 .div2-class #div3 .ap { /* 100 + 100 + 10 + 100 + 10 */
color:aqua;
}複製程式碼

分析得出最後一個最大權重為 320 覆蓋上面所有的。

巢狀越多，權重就越大，除過!important，有important 還是人家最大。

（但需要注意的是巢狀期間 id class 標籤的計算）

下面說說偽元素和偽類的權重

偽元素的權重，相當於類元素的權重

<p class='p2' id="p2"> daasd</p>

p {
color: red; /* 權重 1 */
}
p:hover { /* 類似 :hover,:visited,:active,:link 都代表是偽元素 */ 
color: yellow; /* 權重 1 + hover權重(10) */
}
.p2:hover { /* 如果是類 權重 + 10 + hover 權重 會抵掉上面的*/ 
color: blue;
}
#p2:hover { /* 如果是id 權重 + 100 + hover 權重 會抵掉上面的*/ 
color: pink; 
}

/* 如果其中一個加了!important,如果都加的話，還是id權重高，抵掉所有的 */
p:hover { /* 這裡我最大，會抵掉上面的所有 */ 
color: black !important; /* 權重 1 + hover權重(10) + important權重 */
}

複製程式碼

沒有指上去的時候是這個效果

標籤偽類指上去是這個效果

類偽類指上去是這個效果（抵掉標籤偽類）

id 偽類指上去是這個效果（抵掉類偽類）

標籤偽類加上!important 指上去是這個效果（抵掉上面所有）

因為偽類的權重相當於類元素，故因為類元素的權重小於id元素的權重，所以下面這個設定：hover無效的。

p {
color: red; /* 1 */
}
#p {
color: pink; /* 100 */
}
.p:hover {
color: blue;/* 10 + 10*/
}
複製程式碼

始終為粉色

p {
color: red; /* 1 */
}
#p {
color: pink; /* 100 */
}
#p:hover {
color: aqua;/* 100 + 100*/
}複製程式碼

指上去是淺綠色

偽類的權重，相當於標籤元素的權重

<p class='p2' id="p2"> daasd</p>

p {
color: red; /* 權重 1 */
}
p:after { /* 類似 :hover,:visited,:active,:link 都代表是偽元素 */ 
color: yellow; /* 權重 1 + hover權重(10) */
}複製程式碼

三分鐘搞懂CSS 權重

您可能也會喜歡…