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

，哪怕你写 #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)）
• 通配符 *、组合符 +、~、> 全部不贡献权重，但它们影响匹配范围，间接决定哪条规则能“参与竞争”

权重计算本身不难，难的是在多人协作、组件嵌套、CSS-in-JS 混用的项目里，快速定位“为什么这行样式没生效”。这时候得打开 DevTools 的 Styles 面板，盯着每一行的删除线和小箭头看——那才是真实发生的权重裁决现场。

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