切圖時是不是經常性的寫了樣式無效呢？ 百思不得其解吧
為什麼自己的樣式老是被抵掉了呢？ 為什麼老是用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) */
}複製程式碼