CSS樣式表的優先順序別

原文:http://www.cnblogs.com/lushuicongsheng/archive/2012/07/30/2614756.html

CSS2.1 中規定了關於 CSS 規則 Specificity（特異性）的計算方式，用一個四位的數字串（註：CSS2 中是用三位）來表示，最後以 Specificity 的高低判斷 CSS 的優先權。
Specificity 具體的計算規則：
元素的 style 樣式屬性，加 1,0,0,0。
每個 ID 選擇符（#id），加 0,1,0,0。
每個 class 選擇符（.class）、每個屬性選擇符（例 [attr=”"] ）、每個偽類（例 :hover），加 0,0,1,0。
每個元素或虛擬元素（例 :firstchild）等，加 0,0,0,1。
其他選擇符（例 全域選擇符 *，子選擇符 >），加 0,0,0,0。
最後逐位相加數字串，得到最終的 Specificity 值，按照從左至右的順序逐位比較。
除了 Specificity 還有一些其他規則：
!important 聲明的規則高於一切，如果 !important 聲明衝突，則比較優先權。
如果優先權一樣，則按源碼中“後來者居上”的原則。
由繼承而得到的樣式屬性不參與 specificity 的計算，低於一切其他規則（例 全域選擇符 * ）。
範例分析：

h1 {color: red;} /* 只有一個普通元素加成，結果是 0,0,0,1 */ body h1 {color: green;} /* 兩個普通元素加成，結果是 0,0,0,2 */ /*0,0,0,1 小於 0,0,0,2 ，後者勝出*/ h2.grape {color: purple;} /* 一個普通元素、一個class選擇符加成，結果是 0,0,1,1*/ h2 {color: silver;} /*一個普通元素，結果是 0,0,0,1 */ /*0,0,1,1 大於 0,0,0,1 ，前者勝出*/ html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 7個普通元素、一個屬性選擇符、兩個其他選擇符（子選擇符 >），結果是0,0,1,7 */ li#answer {color: navy;} /* 一個ID選擇符，一個普通選擇符，結果是0,1,0,1 */ /*0,0,1,7 小於 0,1,0,1，後者勝出*/

             摘自  http://www.cnblogs.com/Hotcocoa/articles/2104147.html 

談到CSS優先順序別：從兩個層面來談：

第一層面，就是從宏觀的層面上談，CSS樣式優先順序別，就是

 行內樣式 >  植入樣式（就是寫在頁面style裡的樣式） >連結樣式 >匯入樣式 >瀏覽器預設的樣式

 

第二層面，就是在第一個層面的樣式層級裡某一個階段，舉例子說，在植入樣式這層級上，有5大優先法則；

 優先原則一：文本從上到下，後出現的樣式優先於前面出現的同一樣式

 例：

<style type=”text/css”>

.def1{background:black;}

.def2{background:yellow; }

</style>

<div class=” def2 def1″>測試1</div>

結果：所有瀏覽器均yellow色，注意：與class=”” 引號內的順序無關，只看.def1和.def2在聲明時的順序，.def2後聲明的所以權重高。

優先原則二：id聲明（即 # 開頭的樣式）> class聲明（即 . 開頭的樣式）> 標籤聲明(即 類似 div 開頭)

以上三種聲明處於不同的量級，份量上，div 開頭相當於 1克 重，. 開頭相當於 1公斤 重，# 開頭相當於 1噸 重。

例：

<style type=”text/css”>

#bb{background:pink}

.def{background:black;}

div{background:yellow; }

</style>

<div id=”bb” class=”def”>測試2</div>

結果：所有瀏覽器均pink色，注意：雖然按優先原則一，後出現的權重高，但那隻是在同樣重量級下的比較，優先原則二各重量層級就不同了。

優先原則三：數量取勝。如果同一個樣式聲明即一個大括弧{}由多個 # . 或 div 組成，則權重按出現符號的量級增加

比如：#bb #tt #dd {background:red} 則重量等於3噸

#bb .tt ul.dd li {background:red} 則重量等於1噸2公斤2克，這麼精確的重量，就不需要舉例了吧。

再次說明：優先原則一隻適用兩個樣式聲明同樣重的情況

優先原則四：‘!important’。相當於無限重量，在之前已經有說明，需要注意：ie下，在同一條樣式聲明即一個大括弧中出現的!important 會被隨後出現的同名樣式沖洗掉。

<style type=”text/css”>

.def1{background:yellow !important;background:red;}

.def2{background:green;}

</style>

<div class=”def1 def2 “>dd</div>

結果：ie下，green色，background:yellow !important被後面的background:red沖洗了，而background:red與background:green的較量中，前者敗在優先原則一之下。

優先原則五：近水樓台。<div style=”background:black”></div>直接寫在元素體內的style優先順序別最高！（僅次於!important）用重量來形容，可以定為百萬噸量級。

<style type=”text/css”>

.def1{ background:red;}

</style>

<div class=”def1 ” style=”background:black”>dd</div>

結果：black色。

<style type=”text/css”>

.def1{ background:red !important;}

</style>

<div class=”def1 ” style=”background:black”>dd</div>

結果：red色。

<style type=”text/css”>

.def1{ background:red !important;}

</style>

<div class=”def1 ” style=”background:black !important”>dd</div>

結果：black色。

 

一談樣式的層級，有時候，還和瀏覽器有關係，上述的CSS樣式優先順序別知識，在大部分場合沒問題，但是不是一定對。

所有請各位讀者，這個只是給你一個CSS相對正確的知識。

摘自 http://blog.csdn.net/qulijian1234/article/details/4365048

原文:http://www.cnblogs.com/lushuicongsheng/archive/2012/07/30/2614756.html

CSS2.1 中規定了關於 CSS 規則 Specificity（特異性）的計算方式，用一個四位的數字串（註：CSS2 中是用三位）來表示，最後以 Specificity 的高低判斷 CSS 的優先權。
Specificity 具體的計算規則：
元素的 style 樣式屬性，加 1,0,0,0。
每個 ID 選擇符（#id），加 0,1,0,0。
每個 class 選擇符（.class）、每個屬性選擇符（例 [attr=”"] ）、每個偽類（例 :hover），加 0,0,1,0。
每個元素或虛擬元素（例 :firstchild）等，加 0,0,0,1。
其他選擇符（例 全域選擇符 *，子選擇符 >），加 0,0,0,0。
最後逐位相加數字串，得到最終的 Specificity 值，按照從左至右的順序逐位比較。
除了 Specificity 還有一些其他規則：
!important 聲明的規則高於一切，如果 !important 聲明衝突，則比較優先權。
如果優先權一樣，則按源碼中“後來者居上”的原則。
由繼承而得到的樣式屬性不參與 specificity 的計算，低於一切其他規則（例 全域選擇符 * ）。
範例分析：

h1 {color: red;} /* 只有一個普通元素加成，結果是 0,0,0,1 */ body h1 {color: green;} /* 兩個普通元素加成，結果是 0,0,0,2 */ /*0,0,0,1 小於 0,0,0,2 ，後者勝出*/ h2.grape {color: purple;} /* 一個普通元素、一個class選擇符加成，結果是 0,0,1,1*/ h2 {color: silver;} /*一個普通元素，結果是 0,0,0,1 */ /*0,0,1,1 大於 0,0,0,1 ，前者勝出*/ html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 7個普通元素、一個屬性選擇符、兩個其他選擇符（子選擇符 >），結果是0,0,1,7 */ li#answer {color: navy;} /* 一個ID選擇符，一個普通選擇符，結果是0,1,0,1 */ /*0,0,1,7 小於 0,1,0,1，後者勝出*/