CSS樣式選擇器優先順序

原文:

css樣式選擇器優先順序

css樣式選擇器分為4個等級，a、b、c、d，可以以這四種等級為依據確定css選擇器的優先順序。

1.如果樣式是行內樣式（通過style=」」定義），那麼a=1

2.b為id選擇器的總數

3.c為class類選擇器的數量。

4.d為型別選擇器的數量

5.屬性選擇器，偽類選擇器和class類選擇器優先順序一樣，偽元素選擇器和型別選擇器一樣

6.!important 權重最高，比 inline style 還要高。

例如：

選擇器特殊性 (a,b,c,d)

style= 」」

1,0,0,0

0,2,0,0

#content .dateposted {}

0,1,1,0

div#content {}

0,1,0,1

#content p {}

0,1,0,1

#content {}

0,1,0,0

p.comment .dateposted {}

0,0,2,1

div.comment p {}

0,0,1,2

.comment p {}

0,0,1,1

p.comment {}

0,0,1,1

.comment {}

0,0,1,0

div p {}

0,0,0,2

p {}

0,0,0,1

css優先順序的讀法li.red.level  {} 

h1 + *[rel=up]{} 

ul ol li.red  {} 

#x34y         {} 

(上表中，↑表示還要進行比較，√表示從此處已得到了結果)

再有，只要正確書寫，僅從優先順序中大概知道選擇器結構形式了，如：

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組數值決定於元素名，即元素選擇器，並會進行該組數值累加；

注意，這四組數值分別對應於不同型別的選擇器，互不影響，根據讀法法則進行比較。

最近在寫css的時候，由於經常使用到很長的多級選擇器，而碰到一些樣式被覆蓋或者覆蓋不了的情況是相當的鬱悶，所以專門花了一些時間對一些選擇器做了對比測試。這裡先說明一下，由於ie6不支援css2.0選擇器，所以這些測試忽略了一些2.0的選擇器和連線符，如偽類(:hover)，屬性 ([type=」text」])，子選擇符(>)等，僅對#id，.class，tag和空格連線符測試。

定義：

1. css句子：乙個完整的選擇器構成乙個css句子，如.abb #cd div.class。而用逗號連線的算作多個句子的省略定義方法。

2. css單詞：css句子中任何乙個#id或.class或tag都算作乙個css單詞，雖然照以前的理解一般把tag#id.class1.class2整個看作乙個單詞，但是在本文討論範圍內，這個只能算作乙個由4個單詞組成的片語。

3. 優先順序：對於選擇到同乙個元素的兩個css句子，當他們定義該元素的同乙個屬性時，如果其中乙個寫在前而不會被寫在後面的覆蓋這個屬性，那麼就稱這個css句子的優先順序高於另乙個。而當2個css句子互相調換在**中的位置都是後面的覆蓋前面的屬性時，稱這兩個css句子有相同的優先順序。

測試用dom：

1第一行

第二行自身
2第一行
第二行自身
3第一行
第二行自身
4第一行
第二行自身
5第一行
第二行自身
6第一行
第二行自身
7第一行
第二行自身
8第一行
第二行自身

現在公布答案：

1. 僅乙個選擇器單詞的時候#id高於.class應該不用說了；
2. div#test2比#test2多了乙個單詞，那麼多乙個單詞的優先順序高，這裡可以暫時理解成多乙個單詞就選擇的更精確；
3. 同樣多乙個單詞，但其中乙個有#id選擇，則#test3要高於div .test3；
4. .body #test4高於body #test4，暫時可理解為同樣多層級時，.class高於tag；
5. html #test5與body #test5有同樣的優先順序，先寫的會被覆蓋，這裡猜測同樣的層級數，優先順序與層級跨越的深度無關；
6. #body #test6高於.html #test6，理解為#id優於.class也與層級深度無關；
7. 最後兩個比較有難度了，但瀏覽器下的結果是html #body #test7高於.html .body #test7，怎樣理解我先不說；
8. #html.html .body #test8與.html #body.body #test8同級。
其實越到後面，應該越是能看出一種模糊的規則來。經過我反覆的分析，最終從模糊的感覺中發現了其中的奧秘，或者說是一種說得通的解釋：
把css句子的單詞組成定義為「數字」，像個十百位的數字一樣，css中不同的單詞代表不同的權重數字，分別是#id，.class，tag三個數字依次從高到低排列，組成了相當於十進位制數字的百位，十位，個位。再把每個css句子中個各種單詞的個數代入到剛剛劃分的數字裡，就可以得到乙個類似於十進位制數字的三位數，只是在css的優先順序數字裡，沒有進製的概念，無數個低位單詞也還是低於乙個高位的單詞。從而結論就是，按#id，.class，tag的數字統計了css的單詞個數並代入各個數字後，只要比較兩個css數字的大小(從高位到低位依次比較)，就能得出兩個css的優先順序。
用這個規則重新比較一遍前面的例子：
1. 1,0,0>0,1,0
2. 1,1,0>1,0,0
3. 0,1,1<1,0,0
4. 1,1,0>1,0,1
5. 1,0,1=1,0,1
6. 2,0,0>1,1,0
7. 2,0,1>1,2,0
8. 2,2,0=2,2,0
用這個方法很容易就能比較出最後兩組例子的優先順序，對於前述的一些情況也可以做出合理的解釋，所以在沒有更好的css選擇器解釋方法之前，這個數字計算法是非常方便且容易理解的。

css選擇器優先順序 樣式表優先順序

css三大特性 繼承 優先順序層疊css選擇器優先順序 選擇器 權重 萬用字元 0 標籤名，偽元素 1 類 偽類 屬性 10 id 100 行內樣式 1000 important 1 0 無窮大 總結排序 important 行內樣式 id 類 偽類 屬性 標籤名，偽元素 萬用字元 繼承 瀏覽器預設...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...

CSS樣式優先順序（繼承性 選擇器優先順序）

選擇器的優先順序 css的繼承性指的是應用在乙個標籤上的那些css屬性也會應用到字標籤上。p div 如果div有color red屬性，那麼p也會繼承color red屬性。最近的祖先樣式比其他祖先樣式優先順序高。style color red style color blue class son...