css權重問題例子詳解
阿新 • • 發佈:2017-06-28
tro gree id選擇器 紅色 詳解 one 描述 ren ace
首先,id選擇器權重級別最高,class選擇器其次,html選擇器最後。 例子:
<div class="t1" id="one">
<div class="t2" id="two">
<div class="t3" id="three">
<span>嘿嘿嘿</span>
</div>
</div>
</div>
選中span標簽
當選中span標簽,也可能權重相同,也可能不同,得分下面2種情況。
1.權重相同,誰在後面誰決定。(下面例子嘿嘿嘿的字體顏色為黃色)
<style>
div.t2 span {
color:red;
}
div.t1 span {
color:yellow;
}
</style>
2.權重不同,權重大的決定。(下面例子嘿嘿嘿的字體顏色為黃色)
<style> /**class選擇器最高級只有一個**/ div div.t1 span { color:red; } /**id選擇器最高級也只有一個,但級別比class高**/ #one span { color:yellow; } </style>
沒選中span標簽
如果沒選中span標簽,誰描述得近就誰決定,如果一樣近就再比權重,可以分為下面3種情況。
1.描述得近的決定。(下面例子嘿嘿嘿的字體顏色為黃色)
<style>
/**t3描述得最近**/
.t3 {
color:yellow;
}
#two {
color:red;
}
div.t1 #one {
color:green;
}
</style>
2.描述得一樣近,權重不同,權重大的決定。(下面例子嘿嘿嘿的字體顏色為黃色)
<style> /**多一個html選擇器div**/ div.t1 div.t2 { color:yellow; } div.t1 .t2 { color:red; } </style>
3.描述得一樣近,權重相同,誰在後面誰決定。(下面例子嘿嘿嘿的字體顏色為紅色)
<style>
div.t1 div.t2 {
color:yellow;
}
div.t1 div.t2 {
color:red;
}
</style>
特別的!important
如果在某個屬性後面加個!important,那麽它權重無限大。
下面例子如果不加!important嘿嘿嘿就是紅色,加了後就變成黃色了。
<style>
#two span {
color:red;
}
.t2 span {
color:yellow !important;
}
</style>
css權重問題例子詳解