概念
瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級基于由各種選擇器組成的匹配規(guī)則。
樣式的優(yōu)先級
多重樣式（Multiple Styles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況。
一般情況下，優(yōu)先級如下：
（外部樣式） <（內(nèi)部樣式） <（內(nèi)聯(lián)樣式）
有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。
選擇器的優(yōu)先權(quán)
Paste_Image.png
解釋：
- 內(nèi)聯(lián)樣式表的權(quán)值最高 1000；
- ID 選擇器的權(quán)值為 100
- Class 類選擇器的權(quán)值為 10
- HTML 標(biāo)簽選擇器的權(quán)值為 1
<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 /
color:#F00; / 紅色 /
}
#redP .red em {
/ 權(quán)值 = 100+10+1=111 /
color:#00F; / 藍(lán)色 /
}
#redP p span em {
/ 權(quán)值 = 100+1+1+1=103 /
color:#FF0;/黃色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
最后結(jié)果為：
Paste_Image.png
優(yōu)先級法則
- 選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；
- 當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
- 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
- 繼承的CSS 樣式不如后來指定的CSS 樣式；
- 在同一組屬性設(shè)置中標(biāo)有
!important規(guī)則的優(yōu)先級最大
修改樣式
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00;
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F;
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0 !important;
}
</style>
則結(jié)果為：
Paste_Image.png
!important
當(dāng)在一個樣式聲明上使用 !important 規(guī)則時，該樣式聲明會覆蓋CSS中任何其他的聲明。使用 !important 是一個壞習(xí)慣，應(yīng)該盡量避免，因為這打斷了樣式表中的固有的級聯(lián)規(guī)則。當(dāng)兩條相互沖突的帶有!important 規(guī)則的聲明被應(yīng)用到相同的元素上時，擁有更大優(yōu)先級的聲明將會被采用。
一些經(jīng)驗法則：
- Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
- Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
- Never 永遠(yuǎn)不要在你的插件中使用 !important
- Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important
取而代之，你可以：
- 善用 CSS 的級聯(lián)屬性
使用更多具體的規(guī)則。比如在你需要選定的對象元素前加上更多的元素，使選擇的范圍縮小，你的選擇器就變得更有針對性，從而提高優(yōu)先級：
<div id="test"> <span>Text</span></div>
#test span { color: green }span { color: red }div span { color: blue }
無論你c?ss語句的順序是什么樣的，文本都會是綠色的(green)，因為這一條規(guī)則是最有針對性、優(yōu)先級最高的。（同理，無論語句順序怎樣，藍(lán)色(blue)的規(guī)則都會覆蓋紅色(red)的規(guī)則）
怎樣覆蓋掉 !important
- 再加一條 !important的CSS語句，將其應(yīng)用到更高優(yōu)先級的選擇器（在原有基礎(chǔ)上添加額外的標(biāo)簽、類或 ID 選擇器）上
- 保持選擇器一樣，但添加的位置需要在原有聲明的后面（優(yōu)先級相同的情況下，后邊定義的會覆蓋前邊定義的）。
- 使用相同的選擇器，但是置于已有的樣式之后
