确定 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个html标签不等于一个类，它更像这样：

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 个类也永远不会击败 id（无论如何，使用 id 的样式是相当糟糕的做法）。

---

不要忘记级联。稍后在源文件中声明的具有相同特性的样式将在发生冲突时获胜。除了!important，内联样式总是能胜出。