2019獨角獸企業重金招聘Python工程師標準>>>

????最近面試了一些求職者，我問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。

? ? 例如：以下規則中選擇器的特殊性分別是： ? ?

?a{color:?yellow;}?/*特殊性值：0,0,0,1*/div?a{color:?green;}?/*特殊性值：0,0,0,2*/.demo?a{color:?black;}?/*特殊性值：0,0,1,1*/.demo?input[type="text"]{color:?blue;}?/*特殊性值：0,0,2,1*/.demo?*[type="text"]{color:?grey;}?/*特殊性值：0,0,2,0*/#demo?a{color:?orange;}?/*特殊性值：0,1,0,1*/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><!--適用第5、6行規則，第6行優先級高--> </div>

顯示效果：

? ? 分析上面的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

轉載于:https://my.oschina.net/mayflygeekCarry/blog/365477

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的css优先级计算规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。