CSS選擇器的優先級

關于CSS選擇器優先級,目前國內已有很多人進行過解釋,但感覺不如人意,特別對于初學者,更是難以理解。這裏我把W3C上所描述的規範以我的理解再解釋一下,希望能給大家提供到幫助。

在Calculating a selector’s specificity上的原文摘選如下:

A selector’s specificity is calculated as follows:

count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Example(s):

Some examples:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

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 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */============

CSS優先級的讀法

這裏先更正一些錯誤的讀法。通過百度搜索到的內容中,通常出現這樣的寫法:(1,0,0,0),但部分文章的此的解釋不全面,甚至有誤。

其中最大的一個錯誤就是把結果加:(1,0,0,0)=1000,(0,0,2,2)=22,更有甚者:(0,1,0,1)=0+1+0+1=2!雖然這些理解在很簡單的情況下看上去是正確的,但本質上卻是個重大的錯誤。

另外有部分文章把它理解爲4個級別,也相近,但不能把條理分清楚,理解起來也難。

“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組數值決定于元素名,即元素選擇器,並會進行該組數值累加;

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

IE7對css選擇器的改進
今天稍稍看了一下IE7對css選擇器的改進,出乎我的想象,竟然修複了大部分bug。 1、對僞類的支持。IE6和更低的版本對于僞類的支持僅限于a標簽,諸如“:hover”、“:active”、“:focus”之類的僞類理論上是應該適用于...查看完整版>>IE7對css選擇器的改進
 
CSS手冊簡編:選擇器的使用方法
  1、選擇器(Selector)    選擇器不只是文檔中的元素標記,它還可以是類(Class,這不同于Java或C++中的類)、ID(給予元素特殊的名稱,也便于在腳本中使用)或是元素的某種狀態(如:a:link)。如:   ...查看完整版>>CSS手冊簡編:選擇器的使用方法
 
CSS手冊簡編:選擇器的使用方法
1、選擇器(Selector)選擇器不只是文檔中的元素標記,它還可以是類(Class,這不同于Java或C++中的類)、ID(給予元素特殊的名稱,也便于在腳本中使用)或是元素的某種狀態(如:a:link)。如:<html><s...查看完整版>>CSS手冊簡編:選擇器的使用方法
 
CSS控制頁面樣式的4種方式和優先級-css設計
本節主要講解,兩個內容,第一:CSS如何控制頁面樣式,有幾種方式;第二:這些方式出現在同一個頁面時的優先級。使用xHTML+CSS布局頁面,其中有個很重要的特點就是內容與表象相分離,內容指HTML頁面代碼,表象就是CS...查看完整版>>CSS控制頁面樣式的4種方式和優先級-css設計
 
CSS優先級的讀法-詳解
CSS優先級的讀法:CSS優先級包含四個級別(文內選擇符,ID選擇符,Class選擇符,元素選擇符)以及各級別出現的次數。根據這四個級別出現的次數計算得到CSS的優先級。最近看到篇對這個東西有比較好的解釋的blog,因此...查看完整版>>CSS優先級的讀法-詳解
 
蛙蛙推薦:css樣式表的優先級別演示
蛙蛙推薦:css樣式表的優先級別演示<!--可以看出直接重定義標簽樣式的有效性是最低的, 其次是用"."定義的僞類,再次是用重定義標簽加僞類的方式(類似于H2.myclass{color:blue}的寫法),級別最高的就是用id定義的css樣...查看完整版>>蛙蛙推薦:css樣式表的優先級別演示
 
兼容浏覽器的網頁細線表格設計-css設計
細線表格如果單純設置邊框,很難保證浏覽器兼容。常見的做法是利用 CSS2 的 "border-collapse:collapse;" 屬性合並表格邊框;並對 table 元素設置左邊框和上邊框,對 th 和 td 元素設置右邊框和下邊框。Markup:&...查看完整版>>兼容浏覽器的網頁細線表格設計-css設計
 
跨浏覽器的 inline-block 實現[CSS]
最近在爲自己做個新站,想到了些效果,實現時碰到了些小麻煩,比如這個 inline block。所幸大多數問題都解決了,所以寫出來分享一下。我們在制作網頁時,有時會希望一個元素既能像 block 一樣定義寬度和高度,又可以...查看完整版>>跨浏覽器的 inline-block 實現[CSS]
 
用css編寫的適合標准浏覽器的無限分級彈出菜單
  一直以來,我們大多使用js來實現彈出菜單,可是根據 w3c 的css標准,根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。  沒錯,就是利用 Element:hover 這個僞類。  注意,浏...查看完整版>>用css編寫的適合標准浏覽器的無限分級彈出菜單
 
 
回到王朝網路移動版首頁