确定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之外，内联样式总是会赢得任何内容。