在我們開始之前，先搞明白幾個概念吧。下面是一段css**：
a
a:focus
a:active
a:hover
body#jq-interior
有關css權重等級的介紹最早見於w3c這篇文章，聽說ie5是最早支援css的，不知哪個早一點呢？很明顯ie是沒有完全照足它來實現。在《calculating a selector's specificity》一章，它粗略地用a、b、c、d來對樣式規則進行評估，給出每乙個的得分（1 或 0），但沒有給出最終值的計算方式。
雖然到目前為止，我們已經知道a的權重肯定大於b，而b大於c，d最小，但這實在不好計算，對於接著下來的示例也不好解說。於是我引進外國另乙個補充方案，它出於這篇名叫《css: specificity wars》的有才文章。。它把abcd當成算術上的個、十、百、千這樣的計數單位，各自相乘最後一加，優先順序就一目了然啦。我們甚至可以將它們轉化為以下乙個直觀的圖示。
好了，我們開始分析一下w3c的示例，看它能給我們什麼多餘的資訊。
/*by 司徒正美 all rights reserve*/
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
/* 萬用字元選擇器權重為0，在ie中，它無法區分元素節點與注釋節點 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
/* 標籤選擇器為1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/* 標籤選擇器與偽元素為1 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/*這裡存在後代選擇器的概念，但計算權重時像它這樣的關係選擇器會被進一步肢解，當成兩個標籤選擇器了。*/
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
/* 無視後代選擇器與相鄰選擇器，只看它裡面的選擇器的成分 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
/* 這個相鄰選擇器由標籤選擇器與屬性選擇器組成，屬性選擇器為10 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
/*無視後代選擇器，3個標籤與1個類選擇器，類（classname）在dom中的位置比較顯赫，
擁有專門的getelementbyclassname，等級為c，合計得分13 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
/*兩個類選擇器與乙個標籤選擇器，合計得分21 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
/*getelementbyid，在頁面上獲得元素最快的方式，權重為b，得分100 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
/*行內樣式，得分1000，會覆蓋內部樣式或外部樣式的設定*/
選擇器
表示式或示例
說明 權重
id選擇器
#aaa
100
類選擇器
.aaa
10 標籤選擇器
h1 元素的tagname
1 屬性選擇器
[title]
詳見這裡
10 相鄰選擇器
selecter + selecter
拆分為兩個選擇器再計算
兄長選擇器
selecter ~ selecter
拆分為兩個選擇器再計算
親子選擇器
selecter > selecter
拆分為兩個選擇器再計算
後代選擇器
selecter selecter
拆分為兩個選擇器再計算
萬用字元選擇器
* 0
各種偽類選擇器
如:link， :visited， :hover， :active， :target， :root， :not等
10 各種偽元素
如::first-letter,::first-line,::after,::before,::selection
1
CSS選擇器的權重詳解
原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序權重計算法 css優先順序包含四個級別 標籤內選擇符，id選擇符，class選擇符，元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得...
css選擇器 權重
基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫，建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深，一定能夠被選上 3 選擇頁面所有的，而不是具體某乙個 標籤選擇器，選擇的是頁面上所有這種型別的標籤，所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...
CSS選擇器權重問題
原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符，id選擇符，class選擇符，元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...