什么是 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
解析
为什么呢?原来是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)
所以:
前2行选择器都是2个class选择器,优先级要高于后面2个行代码,他们只有1个class选择器生效;然后根据CSS代码层叠先后的顺序,决定了后面的会覆盖前面的样式,所以最终浏览器会渲染purple
作为文字的颜色。