是 CSS 权重（Specificity）

什么是 CSS 权重（Specificity）

当多个选择器命中同一个元素时，浏览器会根据“权重（Specificity）”来判断谁优先。 也就是说：权重越高的选择器，优先级越高，它的样式会覆盖权重较低的样式。

权重的计算规则

CSS 权重通常被表示成一个四位数：**(a, b, c, d)**，从左到右权重依次递减。

位数	对应选择器类型	举例	每次加多少
a	行内样式	<div style="color:red">	1,0,0,0
b	ID 选择器	#app	0,1,0,0
c	类选择器、属性选择器、伪类	.box、[type="text"]、:hover	0,0,1,0
d	元素选择器、伪元素	div、p::before	0,0,0,1

注意： 通配选择器（*）、组合符（>、+、~、 ）不增加权重。

权重计算示例：

选择器	权重 (a,b,c,d)	说明
div	(0,0,0,1)	元素选择器
.item	(0,0,1,0)	类选择器
#main	(0,1,0,0)	ID 选择器
div.item	(0,0,1,1)	元素 + 类
#main .item	(0,1,1,0)	ID + 类
header nav li.active a:hover	(0,0,3,3)	3个类伪类 + 3个元素
style="color:red"	(1,0,0,0)	行内样式最高
!important	🚨 特殊规则	最高优先级（但不影响 specificity 数值）

权重比较规则

比较时，从左到右依次比较**(a, b, c, d)**，较大的权重值优先。

1. 比较 a 位，行内样式权重最高，若不同则较大者优先。
2. 若 a 位相同，比较 b （ID 数量），若不同则较大者优先。
3. 若 b 位相同，比较 c （类、属性、伪类数量），若不同则较大者优先。
4. 若 c 位相同，比较 d （元素、伪元素数量），若不同则较大者优先。
5. 若 d 位相同，按出现顺序（后写的优先）。

示例：

div { color: blue; }             /* (0,0,0,1) */
.item { color: red; }            /* (0,0,1,0) */
#main .item { color: green; }    /* (0,1,1,0) */

上面的优先级顺序：

#main .item (0,1,1,0) > .item (0,0,1,0) > div (0,0,0,1)

所以最终颜色是绿色。

特殊情况：!important

!important 是一个特殊声明，不属于权重计算的一部分，但它的优先级比任何选择器都高。

比较规则是：

• 带有 !important 的声明 > 不带的声明；
• 如果两个都有 !important，则再按权重比较；
• 行内样式也可以被 !important 覆盖。

继承（inherit）不参与权重计算

如果某个样式是通过继承得到的（比如 color、font-size 等）， 那么它的权重是 最低的（相当于 (0,0,0,0)）， 会被任何显式声明覆盖。

总结表格

类型	示例	权重
行内样式	<div style="">	(1,0,0,0)
ID	#id	(0,1,0,0)
类 / 属性 / 伪类	.class [attr] :hover	(0,0,1,0)
元素 / 伪元素	div ::before	(0,0,0,1)
通配符 / 继承	*, inherited	(0,0,0,0)
!important	-	🚀 最高优先级

CSS 权重决定样式冲突时谁生效。比较顺序是：行内样式 > ID > 类/伪类 > 元素，!important 是终极王牌。

常见误区

误区	正确解释
“选择器越长权重越高”	❌ 不对，不是长度决定，而是 选择器类型数量 决定。
“子元素的样式会继承父元素的优先级”	❌ 不会。继承的样式权重为 0。
“!important 比行内样式弱”	❌ 不对，!important 在声明上总是最高。