CSS进阶篇——具体性 (specificity)

Posted 2022-10-03 老梁写代码

如果同一个 html 元素上有多个 CSS 规则，当它们互相冲突时，浏览器会遵循一定的规则来找到最具体的那条规则，并舍弃与之冲突的其它规则。

这个功能在 CSS 比较少的情况下，用处不大，因为几乎不会有冲突。但随着 CSS 越来越复杂，文件越来越多，发生冲突的可能性就会变大，这个功能就会变得很重要。

更具体 = 更高优先级

同样的选择器，定义在后面的优先级更高：

p  color: red 
p  color: blue 

浏览器最终会选择第二个选择器，也就是 <p> 元素内的文本会为绿色。

但是上面这种写法并不常见，因为没有人会定义两个一样的选择器。这类冲突更多发生在嵌套选择器中：

div p  color: red 
p  color: blue 

如果按照选择器定义的顺序来看优先级，上例中 <div> 中 <p> 元素的文本颜色一定为绿色，但实际上并非如此。

因为浏览器是按照具体性（也叫特异性，specificity）来确定优先级，选择器越具体，它的优先级就越高。

具体性的计算方式

浏览为每一种选择器定义了一个权重：

• ID 选择器是 100
• 类选择器是 10
• HTML 选择器是 1

把 HTML 元素上 CSS 的权重加起来就是它的具体值：

选择器	具体值	计算方式
p	1	1 个 HTML 选择器
div p	2	2 个 HTML 选择器
.tree	10	1 个类选择器
div p.tree	12	2 个 HTML 选择器 + 1 个类选择器，1+1+10
#baobab	100	1 个类选择器
body #content .alternative p	112	1 个 HTML 选择器 + 1 个 ID 选择器 + 1 个类选择器 + 1 个 HTML 选择器，1+100+10+1）

所以，优先级会先看具体值，再看排序。