| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS選擇器的優先級

來源:互聯網  2008-08-15 05:14:16  評論

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

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

關于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組數值決定于元素名,即元素選擇器,並會進行該組數值累加; 注意,這四組數值分別對應于不同類型的選擇器,互不影響,根據讀法法則進行比較。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有