最近在寫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：
<html id="html" class="html">
<body id="body" class="body">
<div id="div">
<div id="test1" class="test test1">1第一行<br>第二行<br>自身</div>
<div id="test2" class="test test2">2第一行<br>第二行<br>自身</div>
<div id="test3" class="test test3">3第一行<br>第二行<br>自身</div>
<div id="test4" class="test test4">4第一行<br>第二行<br>自身</div>
<div id="test5" class="test test5">5第一行<br>第二行<br>自身</div>
<div id="test6" class="test test6">6第一行<br>第二行<br>自身</div>
<div id="test7" class="test test7">7第一行<br>第二行<br>自身</div>
<div id="test8" class="test test8">8第一行<br>第二行<br>自身</div>
</div>
</body>
</html>
這里先給出8組選擇器，每組兩個，各位同學可以先想一想每組里面哪個選擇器的優先級高：
/*第1組*/
#test1{height:2em;}
.test1{height:1em;}
/*第2組*/
.body #test2{height:1em;}
#test2{height:2em;}
/*第3組*/
div .test3{height:2em;}
#test3{height:1em;}
/*第4組*/
.body #test4{height:2em;}
body #test4{height:1em;}
/*第5組*/
html #test5{height:2em;}
body #test5{height:1em;}
/*第6組*/
#body #test6{height:1em;}
.html #test6{height:2em;}
/*第7組*/
html #body #test7{height:1em;}
.html .body #test7{height:2em;}
/*第8組*/
#html.html .body #test8{height:1em;}
.html #body.body #test8{height:2em;}
現在公布答案：
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選擇器解釋方法之前，這個數位計算法是非常方便且容易理解的。