一般情況下：
[1位重要標志位] > [4位特殊性標志] > 聲明先後順序
!important > [ id > class > tag ]
使用!important可以改變優先級別為最高，其次是style對象，然後是id > class >tag ，另外，另外在同級樣式按照申明的順序後出現的樣式具有高優先級。
先來看下!important 這個詭異的東西 復制代碼代碼如下:
<style type="text/css">
div{background: red !important; background: blue}
</style>
除了IE6，其他浏覽器都會顯示背景為紅色，正是!important的作用，意思就是只要我在這裡我就是最重要的啦，任何東西都不能取代我，沒看見都是一個 ！外加一個英文單詞 important 嗎？很形象，很貼切了。IE6這裡會顯示背景為藍色，並不是IE6不支持!important，而是它會按照樣式聲明順序後出現的覆蓋前面的，此時它已經不認識!important了，它六親不認了。這正是廣為流傳的IE6 hack之一。而如果這樣寫會正常顯示背景為紅色：
復制代碼代碼如下:
<style type="text/css">
div{background: blue; background: red !important; }
</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：
復制代碼代碼如下:
<style type="text/css">
div{background: red !important; height:20px;}
#demo1{ background: green;}
.demo1{ background:blue;}
</style>
復制代碼代碼如下:
<div class="demo1" id="demo1" style="background: yellow"></div>
復制代碼代碼如下:
<script type="text/javascript">
document.getElementById("demo1").style.background="black";
</script>
最終顯示背景為紅色，這應該不會有什麼問題, !important 放到哪都會改變優先級的，而後面的JS代碼也不會改變優先級。
--------------------------------------------------------------------------------
另外一個Demo2:
復制代碼代碼如下:
<style type="text/css">
div{background: red !important; height:200px;}
#demo2{ background: green;}
.demo2{ background: blue;}
</style>
復制代碼代碼如下:
<div class="demo2" id="demo2" style="background: yellow !important"></div>
復制代碼代碼如下:
<script type="text/javascript">
document.getElementById("demo2").style.background="black";
</script>
IE6,7 顯示 紅色
FF2+ 顯示 黃色
Opera9+ 顯示 紅色
Safari 顯示 黃色
--------------------------------------------------------------------------------
Demo3:
復制代碼代碼如下:
<style type="text/css">
div{background: red !important; height:200px;}
#demo3{ background: green;}
.demo3{ background: blue;}
</style>
復制代碼代碼如下:
<div class="demo3" id="demo3" style="background: yellow !important"> </div>
復制代碼代碼如下:
<script type="text/javascript">
document.getElementById("demo3").style.background="black !important";
</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的任何影響。
css樣式優先級是按照樣式表中出現順序還是按照元素中class或者id值的聲明順序呢？
以前一直以為是class中聲明的遲的值優先級高，其實是根據樣式表中出現的順序來的。
代碼：
復制代碼代碼如下:
<style type="text/css">
div{ height: 200px; width: 200px; background: red; }
.b{ background: green; }
.a{ background: blue;}
</style>
</head>
<body>
<div class="a b" 2style="background:pink;">
</div>
</body>
div的樣式會顯示blue的樣式顏色。
學透前端行業所有技術，玩遍北京周邊所有城市。然後我會回到那個生我養我的地方，因為有親人的地方才是家。