三分鐘搞懂CSS 權重
切圖時是不是經常性的寫了樣式無效呢? 半死不得其解吧
為什麼自己的樣式老是被抵掉了呢? 為什麼老是用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) */ }複製程式碼