web學習-css優先級計算規則

CSS選擇器權值

 標籤的權值爲1，

類選擇符的權值爲10，

ID選擇符的權值最高爲100

例： p{color:red;} /*權值爲1*/

p span{color:green;} /*權值爲1+1=2*/

.warning{color:white;} /*權值爲10*/

p span.warning{color:purple;} /*權值爲1+1+10=12*/

#footer .note p{color:yellow;} /*權值爲100+10+1=111*/

詳解CSS優先級的讀法，CSS優先級包含四個級別（文內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數。根據這四個級別出現的次數計算獲得CSS的優先級。

　　對優先級的讀法，應該是以「組」來分，這個組之間相互獨立，從左到右進行對比。它們成組出現，以逗號分隔。
　　selector( a , b , c , d )
　　compare: ↑ , ↑ , ↑ , ↑
　　selector( a , b , c , d )
　　正如w3c.org中原文所示，分爲a,b,c,d四組，全爲正整婁，默認爲0，對應於不一樣的選擇器結構和組成形式。在選擇器之間的優先級進行對比時，從左到右1對1對比，當比出有大者時便可中止比較。
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1 */
/*compare ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1 */
/*compare ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3 */
/*compare ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0 */
/*compare ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */

　　(上表中，↑表示還要進行比較，√表示今後處已獲得告終果)
　　再有，只要正確書寫，僅從優先級中大概知道選擇器結構形式了，如：
　　1,0,0,0表示是元素內的style；
　　0,2,1,1表示是一個由兩個ID選擇器，1個類或僞類或屬性選擇器，以及一個元素選擇器組成的選擇器。
　　CSS優先級規則的細節：
　　在糾正讀法後，才能開始講詳細的規則：
　　a組數值只有把CSS寫進style屬性時纔會爲1,不然爲0.寫進style的樣式聲明其實不算是個選擇器，因此這裏面的b,c,d組值均爲0，只有真正的選擇器纔會有b,c,d組值。
　　b組數值決定於ID選擇器#ID，有多少個ID選擇器，並會進行此組數值累加；
　　c組數值決定於類、僞類和屬性選擇符，並會進行該組數值累加；
　　d組數值決定於元素名，即元素選擇器，並會進行該組數值累加；
　　注意，這四組數值分別對應於不一樣類型的選擇器，互不影響，根據讀法法則進行比較。
　　這裏沒有討論到!important，就近原則和繼承，也沒有實例代碼，歡迎你們來webjx.com共同討論！
　　下面是列子：CSS優先級問題
　　CSS優先級包含四個級別（文內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數。根據這四個級別出現的次數計算獲得CSS的優先級。
　　CSS優先級的計算規則以下：
    * 頁面中定義的樣式,加1,0,0,0
    * 每一個ID選擇符(如 #id),加0,1,0,0
    * 每一個Class選擇符(如 .class)、每一個屬性選擇符(如 [attribute=])、每一個僞類(如 :hover)加0,0,1,0
    * 每一個元素選擇符（如p）或僞元素選擇符(如 :firstchild)等，加0,0,0,1
　　而後，將這四個數字分別累加，就獲得每一個CSS定義的優先級的值，
　　而後從左到右逐位比較大小，數字大的CSS樣式的優先級就高。

搞清楚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。

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

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="第二條應該是藍色" /><!--適用第四、5行規則，第4行優先級高-->
    <a href="">第三條應該是黑色</a><!--適用第二、3行規則，第3行優先級高-->
</div>
<div id="demo">
    <a href="">第四條應該是紅色</a><!--適用第五、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迎娶白富美。

 

css的優先級順序（優先級逐級增長: 通用選擇器*  元素(類型)選擇器  類選擇器  屬性選擇器  僞類   ID 選擇器   內聯樣式）!important 規則是例外

 

當!important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其餘的聲明, 不管它處在聲明列表中的哪一個位置. 儘管如此, !important規則仍是與優先級毫無關係使用!important不是一個好習慣，由於它改變了你樣式表原本的級聯規則，從而難以調試。

 

 

 

一些不成文規則

 

• 不要在全站範圍的css中使用!important.

• 只在須要覆蓋全站範圍的css或是外部css（例如引用的ExtJs或是YUI）的時候纔在指定的頁面上使用 !important。

• 不要在你的插件中使用!important。

• 永遠都要優先考慮使用樣式規則的優先級來解決問題而不是 !important。

 

    咱們知道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能夠交換位置，由於一個連接要麼訪問過要 麼沒訪問過，不可能同時知足，也就不存在覆蓋的問題。