一般情況下：

[1位重要標(biāo)志位] > [4位特殊性標(biāo)志] > 聲明先后順序

!important > [ id > class > tag ]  

使用!important可以改變優(yōu)先級別為最高，其次是style對象，然后是id > class >tag ，另外，另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。

-
先來看下!important 這個詭異的東西。


除了IE6，其他瀏覽器都會顯示背景為紅色，正是!important的作用，意思就是只要我在這里我就是最重要的啦，任何東西都不能取代我，沒看見都是一個 ！外加一個英文單詞 important 嗎？很形象，很貼切了。IE6這里會顯示背景為藍(lán)色，并不是IE6不支持!important，而是它會按照樣式聲明順序后出現(xiàn)的覆蓋前面的，此時它已經(jīng)不認(rèn)識!important了，它六親不認(rèn)了。這正是廣為流傳的IE6 hack之一。而如果這樣寫會正常顯示背景為紅色：

---

再來看下4位特殊性標(biāo)志 [0.0.0.0]

從左至右，每次給某一個位置+1，前一段對后一段具有無可辯駁的壓倒性優(yōu)勢。無論后一位數(shù)值有多大永遠(yuǎn)無法超過前一位的1。

1，內(nèi)聯(lián)樣式 [1.0.0.0] 

A：<span id="demo" style="color:red "></span>
B：還有就是JS控制的內(nèi)聯(lián)樣式style對象，document.getElementById("demo").style.color="red";
這兩者屬于同一級別，不過一般情況是JS控制的內(nèi)聯(lián)樣式優(yōu)先級高，這與先后順序申明有關(guān)系與本質(zhì)無關(guān)，因為往往DOM操作是在DOM樹加載完畢之后。

2，ID選擇器 [0.1.0.0]
3，類，屬性，偽類 選擇器 [0.0.1.0]
4，元素標(biāo)簽，偽元素 選擇器 [0.0.0.1]

關(guān)于CSS選擇器可以查看W3C或者CSS的手冊，不啰嗦了。
注意下 偽類選擇器

LVHA偽類,樣式按LVHA優(yōu)先級順序從右至左覆蓋，不同的順序會產(chǎn)生不同的效果。
a:link - 默認(rèn)鏈接樣式
a:visited - 已訪問鏈接樣式
a:hover - 鼠標(biāo)懸停樣式
a:active - 鼠標(biāo)點擊樣式

---

最后寫下關(guān)于JS控制內(nèi)聯(lián)樣式 帶!important的現(xiàn)象：

看下正常的Demo1：  

1 <style type="text/css"> 
2 div{background: red !important; height:20px;} 
3 #demo1{ background: green;} 
4 .demo1{ background:blue;} 
5 </style> -

1 <div class="demo1" id="demo1" style="background: yellow"></div>

1<script type="text/javascript">
2document.getElementById("demo1").style.background="black"; 
3</script> 

-最終顯示背景為紅色，這應(yīng)該不會有什么問題, !important 放到哪都會改變優(yōu)先級的，而后面的JS代碼也不會改變優(yōu)先級。

---

-

另外一個Demo2: