最近面試了一些求職者，我問css優先級計算規則是怎樣的？答曰ID優先級>class>元素選擇器，外聯樣式優先級低于内聯樣式，内聯樣式優先級低于行間樣式，然後就沒有然後了……，ID選擇器的優先級确實>class選擇器的優先級>元素選擇器的優先級，但是外聯樣式優先級并不一定低于内聯樣式優先級。做為一個合格的前端工程師，讓我們徹底搞清楚css優先級計算規則吧！
特殊性
css繼承是從一個元素向其後代元素傳遞屬性值所采用的機制。确定應當向一個元素應用哪些值時，浏覽器不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來源。這個過程就稱為層疊。——《css權威指南》
上面這句話有兩個詞需要稍作解釋，“聲明”和“特殊性”。如下圖，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。
例如：以下規則中選擇器的特殊性分别是：
顯示效果：
分析上面的demo，要注意特殊性是怎麼排序的，上面第4行和第5行規則，第4行之是以優先級比第5行高，是因為第四行特殊性值最後面是1，而第5行特殊性值最後面是0。回過頭來回答文章最開始的問題，為什麼ID選擇器的優先級比類選擇器的優先級高？實際上是因為選擇器特殊性值是從左向右排序的，特殊性值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可以交換位置，因為一個連結要麼通路過要麼沒通路過，不可能同時滿足，也就不存在覆寫的問題。
本文位址：http://www.cnblogs.com/wangmeijian/p/4207433.html