確定CSS具體分數

Question

如何計算這些聲明塊特異性得分：

body div main section div ul li p strong span a {}

特異性= 1 * 11 = 11

，並

.someClass {}

特異性= 10 * 1 = 10

那麼，第一個會贏？

Answer 1

W3C specification狀態：

一個選擇的特異性的計算方法如下：

• 計數在選擇器ID選擇器的數目（= A）
• 計數類選擇器的數目，屬性選擇器和選擇器中的僞類（= b）
• 計算選擇器中類型選擇器和僞元素的數量（= c）
• 忽略通用選擇否定僞類內

選擇器進行計數像任何其他， 但否定本身不能算作一個僞類。

實例：

*    /* a=0 b=0 c=0 -> specificity = 0 */ 
LI    /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 
\#x34y   /* a=1 b=0 c=0 -> specificity = 100 */ 
\#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 

串接三個數字的A-B-C（在具有大基數的數字系統）給出的特異性。現在

---

我會盡量做到是明確如何切實執行。 IE瀏覽器。 10個HTMLS標籤不等於一個類，它會更是這樣的：

id : class : tag : pseudo-elements

---

第一個例子：

body div main section div ul li p strong span a {} 

特異性：0 : 0 : 11 : 0

第二個例子：

.someClass {} 

特徵：0 : 1 : 0 : 0

11個元素將贏得不與一個類。更高層總是勝利，因此甚至超過1000個班級永遠不會擊敗身份證（無論如何，使用身份證的樣式是非常糟糕的做法）。

---

不要忘了級聯。在源文件中稍後聲明具有相同特異性的樣式將在爭用情況下獲勝。除了!important之外，內聯樣式總是會贏得任何內容。