CSS中specificity的研究(CSS选择器权重)

668 阅读1分钟

什么是 specificity ?

在CSS世界中,选择器是经常使用的工具。如果使用不同的选择器操纵同一个元素时,元素的样式到底该怎么生效呢?

CSS specificity 就是为了解决这类问题而诞生的。

个人翻译为CSS 权重感觉会更合适一些。

举个例子

先看HTML代码结构:

<main class="main">
   <p class="p">猜猜我是什么颜色</p>
</main>

再来看看css代码:

.header .p,
.main .p {
  color: green;
}

:is(.header, .main) .p {
  color: purple;
}

:where(.header, .main) .p {
  color: red;
}

.p {
  color: blue;
}

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

正确答案是:purple image.png

解析

为什么呢?原来是CSS规定了选择器的优先级,用specificity这个高级词汇表示,一般翻译为“特殊性”、“特异性”。

specificity可以描述成一个4位数的用点号隔开的数字字符串,类似我们常用的版本管理中的4位数版本号:0.0.0.0

为了便于理解,我们甚至可以将其看成一个4位数的数值,数值越大代表specificity越高,specificity高的会覆盖specificity较低的属性。

例如:

内联样式(element.style)的specificity为:1.0.0.0(1000)

ID选择器的specificity为:0.1.0.0 (0100)

class选择器或伪类的specificity为:0.0.1.0 (0010)

tag选择器(元素)和伪元素的specificity为:0.0.0.1 (0001)

连接符和通配符选择器的specificity为:0.0.0.0 (0000)

所以:

image.png

image.png

前2行选择器都是2个class选择器,优先级要高于后面2个行代码,他们只有1个class选择器生效;然后根据CSS代码层叠先后的顺序,决定了后面的会覆盖前面的样式,所以最终浏览器会渲染purple作为文字的颜色。