例:
<styletype=”text/css”>
.def1{background:black;}
.def2{background:yellow; }
</style>
<div class=” def2def1″>測試1</div>
結果:所有瀏覽器均yellow色,注意:與class=””引號內的順序無(wú)關(guān),只看.def1和.def2在聲明時(shí)的順序,.def2后聲明的所以權重高。
優(yōu)先原則二:id聲明(即 # 開(kāi)頭的樣式)>class聲明(即 . 開(kāi)頭的樣式)> 標簽聲明(即 類(lèi)似 div 開(kāi)頭)
以上三種聲明處于不同的量級,份量上,div 開(kāi)頭相當于 1克 重,. 開(kāi)頭相當于 1公斤 重,#開(kāi)頭相當于 1噸 重。
例:
<styletype=”text/css”>
#bb{background:pink}
.def{background:black;}
div{background:yellow; }
</style>
<div id=”bb”class=”def”>測試2</div>
結果:所有瀏覽器均pink色,注意:雖然按優(yōu)先原則一,后出現的權重高,但那只是在同樣重量級下的比較,優(yōu)先原則二各重量級別就不同了。
優(yōu)先原則三:數量取勝。如果同一個(gè)樣式聲明即一個(gè)大括號{}由多個(gè)#
比如:#bb #tt #dd {background:red} 則重量等于3噸
#bb .tt ul.dd li {background:red}則重量等于1噸2公斤2克,這么精確的重量,就不需要舉例了吧。
再次說(shuō)明:優(yōu)先原則一只適用兩個(gè)樣式聲明同樣重的情況
優(yōu)先原則四:‘!important’。相當于無(wú)限重量,在之前已經(jīng)有說(shuō)明,需要注意:ie下,在同一條樣式聲明即一個(gè)大括號中出現的!important會(huì )被隨后出現的同名樣式?jīng)_洗掉。
<styletype=”text/css”>
.def1{background:yellow!important;background:red;}
.def2{background:green;}
</style>
<div class=”def1 def2“>dd</div>
結果:ie下,green色,background:yellow!important被后面的background:red沖洗了,而background:red與background:green的較量中,前者敗在優(yōu)先原則一之下。
優(yōu)先原則五:近水樓臺。<divstyle=”background:black”></div>直接寫(xiě)在元素體內的style優(yōu)先級別最高?。▋H次于!important)用重量來(lái)形容,可以定為百萬(wàn)噸量級。
<styletype=”text/css”>
.def1{ background:red;}
</style>
<div class=”def1 ”style=”background:black”>dd</div>
結果:black色。
<styletype=”text/css”>
.def1{ background:red !important;}
</style>
<div class=”def1 ”style=”background:black”>dd</div>
結果:red色。
<styletype=”text/css”>
.def1{ background:red !important;}
</style>
<div class=”def1 ”style=”background:black!important”>dd</div>
結果:black色。
聯(lián)系客服