CSS选择器权重对比解析：哪个更强大？

CSS选择器的样式生效与否并非取决于代码书写顺序，而是由一套精密的四维权重规则（a,b,c,d）严格计算决定：a代表内联样式的数量，b是ID选择器个数，c涵盖类名、属性及伪类，d则统计标签名和伪元素；比较时像版本号一样逐位从左到右判定高低，哪怕c值高达11也敌不过b=1的ID优势。本文不仅拆解了常见选择器的权重速算逻辑（如`.class1.class2`胜过`div.class1`、`:hover`计入c而`::before`计入d），更直击开发痛点——揭示`!important`的真实定位（仅在权重相等后“插队”，滥用将引发维护灾难），并推荐Chrome DevTools中查看specificity值的实操技巧，帮你告别盲目加权、反复刷新的低效调试，真正掌握CSS样式冲突背后的确定性规则。

怎么快速算出哪个CSS选择器会生效

浏览器不是靠“谁写在后面”决定样式的，而是按一套权重规则硬算出来的。你得把选择器拆成四类数字（a,b,c,d），按从左到右顺序比大小——就像比较版本号 v1.2.3.4 那样。

实操时别手算，直接套公式：
a：内联样式（ style="max-width:100%"）计 1，否则 0
b：ID 选择器个数（#header、div#main 都算 1 个）
c：类名、属性、伪类个数（.btn、[type="submit"]、:hover 各算 1）
d：标签名、伪元素个数（div、p::before 各算 1）

• #nav .item:hover → a=0, b=1, c=2（.item + :hover）, d=1（div？不，这里没标签名！等等——它前面没标签，所以 d=0）→ 实际是 0,1,2,0
• div#nav ul li.active a → a=0, b=1（只有 #nav）, c=1（.active）, d=4（div、ul、li、a）→ 0,1,1,4
• 注意：!important 不参与权重计算，它是在权重相等后才“插队”的，且只对单个声明有效

为什么 .class1.class2 比 div.class1 权重高

因为权重看的是“数量”，不是“长度”或“看起来多高级”。两个类名 = c=2；一个标签+一个类 = c=1, d=1 → 对应 0,0,2,0 vs 0,0,1,1。前者 c 位更大，直接胜出，d 再大也没用。

• 连续写多个类（.a.b.c）就是纯堆 c 值，非常高效
• 用标签限定（button.primary）反而拉低竞争力，除非你真需要它只作用于 button
• 后代选择器（.parent .child）里每个部分单独算，但整体权重是各部分之和——.parent 是 c=1，.child 是 c=1，合起来 c=2

遇到 !important 别急着加，先查权重是否真被压了

很多人一看到样式不生效就狂加 !important，结果埋下维护雷：后续想覆盖它，只能用更暴力的 !important 或内联样式。其实 80% 的场景，只是你没意识到某个父级规则权重更高。

• 打开 Chrome DevTools → 选中元素 → 看 Styles 面板里被划掉的声明，鼠标悬停会显示「specificity」值，点开还能看到是哪个规则赢了
• * { color: red !important } 这种全局写法，会让所有其他颜色声明失效，连内联样式都拦不住
• 如果必须用 !important，优先加在低权重选择器上（比如 .btn { color: blue !important }），而不是去怼高权重的老代码

伪类和伪元素权重容易搞混

:hover、:nth-child()、:not() 都算伪类，计入 c；而 ::before、::placeholder 是伪元素，计入 d。这个区分直接影响结果。

• a:hover → c=1（:hover）, d=1（a）→ 0,0,1,1
• a::before → c=0, d=2（a + ::before）→ 0,0,0,2，比上面那个还低
• :not(.disabled) 整体算 1 个伪类（c +=1），括号里 .disabled 不额外加分 —— 它只是 :not() 的参数，不是独立选择器
• 别信“:is() 会降权”这种传言，:is(.a, .b, .c) 就按里面最高权重的那个算（比如三个都是类，c=1）

权重不是玄学，但它的“进位规则”很反直觉：c=11 不敌 b=1，哪怕 b 只是 1 个 ID。真正卡住人的，往往是漏算了某个隐含的类、伪类，或者误把伪元素当伪类。动手前，先拆解再对位，比反复刷新页面有效得多。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~