關於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組數值決定於元素名,即元素選擇器,並會進行該組數值累加;
註意,這四組數值分別對應於不同類型的選擇器,互不影響,根據讀法法則進行比較。