關於CSS樣式優先順序

一般情況下：

[1位重要標誌位] > [4位特殊性標誌] > 聲明先後順序

!important > [ id > class > tag ]  

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

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

1 <style type="text/css"> 
2  div{background: red !important; background: blue}
3 </style> 

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

1 <style type="text/css"> 
2 div{background: blue; background: red !important; }
3 </style> 

再來看下4位特殊性標誌 [0.0.0.0]

從左至右，每次給某一個位置+1，前一段對後一段具有無可辯駁的壓倒性優勢。無論後一位元值有多大永遠無法超過前一位的1。

1，內聯樣式 [1.0.0.0] 

A：<span id="demo" style="color:red "></span>
B：還有就是JS控制的內聯樣式style對象，document.getElementById("demo").style.color="red";
這兩者屬於同一層級，不過一般情況是JS控制的內聯樣式優先順序高，這與先後順序申明有關係與本質無關，因為往往DOM操作是在DOM樹載入完畢之後。

2，ID選取器 [0.1.0.0]
3，類，屬性，偽類 選取器 [0.0.1.0]
4，元素標籤，虛擬元素 選取器 [0.0.0.1]

關於CSS選取器可以查看W3C或者CSS的手冊，不囉嗦了。
注意下 偽類別選取器

LVHA偽類,樣式按LVHA優先順序順序從右至左覆蓋，不同的順序會產生不同的效果。
a:link - 預設連結樣式
a:visited - 已訪問連結樣式
a:hover - 滑鼠移至上方樣式
a:active - 滑鼠點擊樣式

最後寫下關於JS控制內聯樣式 帶!important的現象：

看下正常的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> 

最終顯示背景為紅色，這應該不會有什麼問題, !important 放到哪都會改變優先順序的，而後面的JS代碼也不會改變優先順序。

另外一個Demo2:

1 <style type="text/css">
2 div{background: red !important; height:200px;}
3 #demo2{ background: green;}
4 .demo2{ background: blue;}
5 </style>
6  1 <div class="demo2" id="demo2" style="background: yellow !important"></div>1 <script type="text/javascript">
2 document.getElementById("demo2").style.background="black";
3 </script>
IE6,7        顯示 紅色 FF2+        顯示 黃色 Opera9+   顯示 紅色 Safari       顯示 黃色

Demo3:

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

1 <div class="demo3" id="demo3" style="background: yellow !important"> </div>1 <script type="text/javascript">
2 document.getElementById("demo3").style.background="black !important";
3 </script>
IE6,7       顯示紅色 FF2+       顯示黃色 Opera9+  顯示黑色 Safari      顯示黑色

解釋下上面兩個例子：

JS控制的style對象 實際就是內聯樣式style，這個沒錯 但是對於 JS控制style對象屬性值裡增加的!important 三個瀏覽器卻給出了不同的結果：

IE：JS控制style對象屬性值完全覆蓋內聯style屬性值，不支援Element.style.property="value !important"，將報錯:參數無效。

FF2+：不完全支援Element.style.property="value !important" : !important無效，不會報錯, 如果內聯style屬性值無!important，則完全覆蓋，有!important 則內聯style屬性優先順序最高，不會受JS控制style的任何影響。

Opera9+ ：JS控制style對象屬性值完全覆蓋內聯style屬性值，支援Element.style.property="value !important"。

Safari：支援Element.style.property="value !important" ，如果內聯style屬性值無!important，則完全覆蓋，有!important 則內聯style屬性優先順序最高，不會受JS控制style的任何影響。