首页 > 文章 > 前端

CSS选择器权重详解与实战分析

时间：2026-05-10 20:19:08 123浏览收藏

CSS选择器权重并非简单相加，而是一套严格逐位比较的四维坐标系统（a,b,c,d）：内联样式恒为最高档(1,0,0,0)，ID数量决定b位、类/属性/伪类共用c位可累加但不跨类型进位、标签名和伪元素占d位，且继承样式权重仅为(0,0,0,0)——这意味着哪怕父元素用ID定义样式，子元素只要写一个最普通的标签选择器（如div）就能轻松覆盖它；真正让开发者踩坑的往往不是规则本身，而是嵌套结构中的ID计数误区、:not()与伪元素的权重归属混淆，以及!important仅跳过比较却无法绕过权重逻辑的本质。掌握这套机制，才能在复杂项目中一眼看穿DevTools里那些带删除线的样式究竟败给了谁。

HTML中CSS选择器权重的计算规则

内联样式权重固定为 `(1,0,0,0)`，且不可叠加

只要元素带 style 属性，它的权重就是最高档的 (1,0,0,0)，不管后面跟多少个 ID 或类选择器，都压不住它。比如

，哪怕你写 #box.active:hover（权重 (0,1,2,1)），也改不了这个 color。

注意：style 属性本身不参与“选择器组合计算”，它不是靠数量堆出来的，而是独立档位。哪怕你用 JS 动态设置 element.style.color = 'blue'，也等效于写了内联样式，权重不变。

`#id` 每出现一次，`b` 位加 1，空格或 `>` 不影响计数

ID 选择器只看数量，不看嵌套关系。例如 #nav #menu .item 中有两个 #，权重是 (0,2,1,0)；而 div#main input[type="text"] 里只有一个 ID，所以是 (0,1,1,2)。

常见错误：以为 #header nav ul li a 因为“更深”所以权重更高——其实它没 ID，只有标签，权重只是 (0,0,0,5)，远低于一个 .btn（(0,0,1,0)）。

多个 ID 连写（如 #a#b）在现代浏览器中无效，不被解析，别这么写
CSS 预处理器（如 Sass）里嵌套生成的 ID 选择器，仍按实际输出的 CSS 字符串统计 ID 数量

类、属性、伪类共用 `c` 位，可累加但不跨类型进位

.nav、[data-id]、:hover、:nth-child(2) 全部算作 +1 到 c，没有优先级高低之分。所以 .btn[data-loading]:focus 是 (0,0,3,0)，和 .btn.primary.large（三个类）权重一样。

容易混淆的点：

::before 是伪元素，算 d 位（+1），不是 c；而 :before（单冒号）是旧写法，部分浏览器仍识别为伪类，但规范已废弃，建议统一用双冒号
:not(.disabled) 整体不算额外权重，只看括号里的内容——.disabled 贡献 1 个 c，:not 本身不加分
.list > li:first-child：其中 .list（c=1）、li（d=1）、:first-child（c=1），总权重 (0,0,2,1)；> 符号不占位

权重比较是逐位进行的，`a > b > c > d`，不存在“总和相等就平手”

浏览器不会把 (0,1,0,0) 和 (0,0,10,0) 加起来比大小。前者是 ID，后者是 10 个类，但 b=1 > c=10，所以 ID 选择器赢。这就是为什么 #app 能轻松干掉一整行 BEM 类名。

真正容易翻车的地方：

用 !important 时，它不改变选择器权重，而是直接跳过权重比较阶段——但两个 !important 规则之间，依然要走正常权重比对
继承来的样式权重是 (0,0,0,0)，哪怕父元素用了 #root，子元素没写任何选择器，继承值也永远输给最朴素的 div（(0,0,0,1)）
通配符 *、组合符 +、~、> 全部不贡献权重，但它们影响匹配范围，间接决定哪条规则能“参与竞争”