CSS选择器优先级详解攻略

CSS选择器优先级并非简单的“后写覆盖”或“越长越强”，而是由一套严谨的四位权重规则（a,b,c,d）逐位比较决定：内联样式、ID数量、类/属性/伪类数量、元素/伪元素数量各自独立贡献一位，高位胜出、不加总不进位；!important仅对单条声明强行提权，不改变选择器本身权重，应谨慎用于第三方库覆盖等紧急场景，而非日常开发。掌握这一机制，配合开发者工具中被划掉的样式提示，能快速定位真实生效规则，告别凭直觉调试的低效困境。

CSS 优先级不是“谁写在后面谁赢”，而是由选择器结构决定的硬性权重规则；!important 能强行拔高单条声明，但不改变选择器本身的权重值。

怎么算一个选择器的权重值（a,b,c,d）

权重是四位非进位整数，顺序固定：a（内联样式）、b（ID 数量）、c（类/属性/伪类数量）、d（元素/伪元素数量）。浏览器只逐位比大小，不加总、不进位。

例如：

• #nav .item:hover → b=1, c=2（.item 和 :hover），d=1（item 是类名，不是元素；真正元素是隐含的，比如 li 或 div，需看实际 HTML）→ 权重为 (0,1,2,1)
• div#main.content[data-type="list"]::before → a=0, b=1（#main），c=2（.content + [data-type="list"]），d=2（div + ::before）→ (0,1,2,2)
• style="color:red" → 直接命中 a=1，其余为 0 → (1,0,0,0)，稳压一切

注意：:where()、*、+、> 等组合符本身不贡献权重；:is() 和 :not() 内部的选择器才参与计算。

为什么 .btn.btn.btn 没用 ID 高

ID 选择器的 b 位是 1，而类选择器只影响 c 位。哪怕你叠 99 个类，c=99，只要 b=0，就输给任意一个 b=1 的规则——因为比较时先看 b，b 大直接胜出，后面全不看了。

常见误判场景：

• 以为 .header .nav .link.active（c=4）能压过 #user-menu（b=1）→ 实际不行，b 位碾压
• 把 div#app ul li a 当成“很重” → 其实只是 (0,1,0,4)，b=1 是它唯一的高光，d=4 完全无关紧要
• 用 body div p span em 这种长链想提权 → 还是 (0,0,0,5)，连一个 .text（(0,0,1,0)）都打不过

开发者工具里怎么看哪个规则生效了

打开 Chrome / Edge / Firefox 的开发者工具（F12），选中元素后切到 Styles 面板，就能直观看到：

• 被划掉的声明 → 被更高权重或同权重但后定义的规则覆盖
• 未被划掉、且排在最上方的声明 → 当前生效项（注意：它不一定权重最高，可能是同权重下最后定义的）
• 每条规则右侧有小箭头，点开会跳转到源码位置，可确认是否拼错 ID 或 class 名
• 若某条规则带 !important，会标黄并显示“Important”，但它只对这一条属性生效，不影响整个选择器权重

别依赖“看起来写了好多”的直觉，#sidebar 和 .sidebar.sidebar.sidebar 在权重面板里一眼就能分出胜负。

什么时候该用 !important

!important 是紧急出口，不是常规手段。它绕过权重比较，但不解决根本冲突。

真需要它的典型场景：

• 第三方 UI 库的默认样式太顽固，又不能改源码，临时覆盖某一条关键色值
• 内联样式无法修改（如 CMS 输出），只能靠 !important 强顶
• 媒体查询里需要确保某个断点下的行为不被基础样式干扰

反例：

• 为了压过同事写的 .btn-primary 就加 !important → 应该协商统一用 ID 或重构选择器结构
• 每个类都加 !important 图省事 → 后续维护会陷入“谁的 !important 更 !important”的死循环

权重计算本身没有歧义，难的是在真实项目里快速定位冲突源头——优先看开发者工具里的划掉线，再反查选择器构成，比手算 (a,b,c,d) 更快也更可靠。

今天关于《CSS选择器优先级详解攻略》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！