1.ID優先級>class>元素選擇器 ，外聯樣式優先級低於內聯樣式，內聯樣式優先級低於行間樣式（外聯式優先級不一定低於內聯式優先級）
如下圖，css規則由選擇器和聲明塊組成，寫在選擇器後面大括號裏的就叫聲明。
實際上，同一個元素可以使用多個規則來指定它的字體顏色，每個規則都有自己的選擇器。顯然最終只有一個規則起作用（不可能一個字既是紅色又是綠色），那麼該規則的特殊性最高，特殊性即css優先級。很多同學僅僅知道選擇器優先級ID>class>元素選擇器，而不知道ID的優先級爲什麼大於class的優先級
那麼css優先級到底是怎麼計算的呢？
選擇器的特殊性值表述爲4個部分，用0,0,0,0表示。
- ID選擇器的特殊性值，加0,1,0,0。
- 類選擇器、屬性選擇器或僞類，加0,0,1,0。
- 元素和僞元素，加0,0,0,1。
- 通配選擇器*對特殊性沒有貢獻，即0,0,0,0。
- 最後比較特殊的一個標誌!important（權重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，可以認爲它的特殊性值爲1,0,0,0,0。
例如：以下規則中選擇器的特殊性分別是：
1 a{color: yellow;} /*特殊性值：0,0,0,1*/
2 div a{color: green;} /*特殊性值：0,0,0,2*/
3 .demo a{color: black;} /*特殊性值：0,0,1,1*/
4 .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
5 .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
6 #demo a{color: orange;} /*特殊性值：0,1,0,1*/
7 div#demo a{color: red;} /*特殊性值：0,1,0,2*/
對照下面的demo，來驗證上面幾組規則的正確與否：
<a href="">第一條應該是黃色</a> <!--適用第1行規則-->
<div class="demo">
<input type="text" value="第二條應該是藍色" /><!--適用第4、5行規則，第4行優先級高-->
<a href="">第三條應該是黑色</a><!--適用第2、3行規則，第3行優先級高-->
</div>
<div id="demo">
<a href="">第四條應該是紅色</a><!--適用第6、7行規則，第7行優先級高-->
</div>
結果顯示：
上面第4行和第5行規則，第4行之所以優先級比第5行高，是因爲第四行特殊性值最後面是1，而第5行特殊性值最後面是0。
實際上是因爲選擇器特殊性值是從左向右排序的，特殊性值1,0,0,0大於以0開頭的所有特殊性值，即便它是0,99,99,99，優先級依然比1,0,0,0要低。
前面有講到通配選擇器*的特殊性值是0,0,0,0，而元素通過父元素繼承過來的樣式是沒有特殊性值的，所以，通配選擇器定義的規則優先級高於元素繼承過來的規則的優先級。
細心的同學應該已經發現了，特殊性值中的4個0中的第一個0是給誰暗箱操作內定了嗎？是的！DOM中的行間樣式送了點紅包，於是它就牛了。行間樣式的特殊性是1,0,0,0。行間樣式的優先級比ID選擇器優先級高。
層疊
假如特殊性相同的兩條規則應用到同一個元素會怎樣？css會先查看規則的權重（!important），加了權重的優先級最高，當權重相同的時候，會比較規則的特殊性，根據前面的優先級計算規則決定哪條規則起作用，當特殊性值也一樣的時候，css規則會按順序排序，後聲明的規則優先級高，成爲人生贏家，當上總經理出任CEO迎娶白富美。
我們知道a標籤有四種狀態：鏈接訪問前、鏈接訪問後、鼠標滑過、激活，分別對應四種僞類:link、:visited、:hover、:active，並且這四個僞類如果對同一個元素設置同一個屬性，那它們的聲明順序還有一定要求，一般大家都遵循“愛恨原則LVHA”（LoVe HAte），爲什麼是這個順序？不能是其它順序嗎？
根據css優先級計算規則，僞類的特殊性值是0,0,1,0，4個僞類的特殊性值相同，那麼後面聲明的規則優先級高。當鼠標滑過a鏈接時，滿足:link和:hover兩個僞類，要改變a標籤的顏色，就必須將:hover僞類在:link僞類後面聲明；同理，當鼠標點擊激活a鏈接時，同時滿足:link、:hover、:active三種狀態，要顯示a標籤激活時的樣式（:active），必須將:active聲明放到:link和:hover之後。因此得出LVHA這個順序。這個順序能不能變？可以，但也只有:link和:visited可以交換位置，因爲一個鏈接要麼訪問過要麼沒訪問過，不可能同時滿足，也就不存在覆蓋的問題。
###########2017-5-8補充############
有意思的是，如果某個元素class（類選擇器）的數量大於255個，不同的瀏覽器的表現不一致，包括但不限於以下瀏覽器認爲class選擇器的優先級會超過id選擇器：
文章轉自：http://www.cnblogs.com/wangmeijian/p/4207433.html