分享
 
 
 

CSS選擇器的優先級

王朝html/css/js·作者佚名  2008-08-15
窄屏简体版  字體: |||超大  

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

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

 
 
 
免責聲明:本文為網絡用戶發布,其觀點僅代表作者個人觀點,與本站無關,本站僅提供信息存儲服務。文中陳述內容未經本站證實,其真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
2023年上半年GDP全球前十五強
 百态   2023-10-24
美眾議院議長啟動對拜登的彈劾調查
 百态   2023-09-13
上海、濟南、武漢等多地出現不明墜落物
 探索   2023-09-06
印度或要將國名改為「巴拉特」
 百态   2023-09-06
男子為女友送行,買票不登機被捕
 百态   2023-08-20
手機地震預警功能怎麽開?
 干货   2023-08-06
女子4年賣2套房花700多萬做美容:不但沒變美臉,面部還出現變形
 百态   2023-08-04
住戶一樓被水淹 還衝來8頭豬
 百态   2023-07-31
女子體內爬出大量瓜子狀活蟲
 百态   2023-07-25
地球連續35年收到神秘規律性信號,網友:不要回答!
 探索   2023-07-21
全球鎵價格本周大漲27%
 探索   2023-07-09
錢都流向了那些不缺錢的人,苦都留給了能吃苦的人
 探索   2023-07-02
倩女手遊刀客魅者強控制(強混亂強眩暈強睡眠)和對應控制抗性的關系
 百态   2020-08-20
美國5月9日最新疫情:美國確診人數突破131萬
 百态   2020-05-09
荷蘭政府宣布將集體辭職
 干货   2020-04-30
倩女幽魂手遊師徒任務情義春秋猜成語答案逍遙觀:鵬程萬裏
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案神機營:射石飲羽
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案昆侖山:拔刀相助
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案天工閣:鬼斧神工
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案絲路古道:單槍匹馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:與虎謀皮
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:指鹿為馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:小鳥依人
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:千金買鄰
 干货   2019-11-12
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有