CSS优先级由选择器权重(a,b,c,d)决定，逐位比较不加总；!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 大直接胜出，后面全不看了。
常见误判场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 以为
.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) 更快也更可靠。
