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