类选择器与ID选择器权重对比详解

CSS中ID选择器（权重100）始终压倒类选择器（权重10），当二者同时作用于同一元素的同一属性时，ID规则无条件覆盖类规则——这不是“叠加生效”，而是权重机制下的唯一胜出；浏览器开发者工具中被划掉的样式正是被更高权重规则淘汰的结果；真正可靠的解法不是滥用!important硬刚，而是回归语义化结构（如将样式主导权交还class、避免滥用ID）、合理组合选择器（如ID+class提升至110）或溯源排查隐藏样式来源，因为权重的本质不是数字游戏，而是CSS层叠逻辑与工程可维护性的平衡。

类选择器和ID选择器冲突时，谁赢？

CSS 里没有“同时作用”的说法，只有“匹配多个规则后按权重决定用哪条”。ID 选择器权重（100）远高于 class 选择器（10），所以当两者都匹配同一个元素，且设置同一属性（比如 color），ID 的声明会覆盖 class 的。

常见错误现象：

• 写了 .btn { color: blue; }，又给按钮加了 id="primary" 并写了 #primary { color: red; }，结果文字是红色——不是“两个都生效”，而是 #primary 覆盖了 .btn。
• 以为加个 !important 就能强行翻盘，其实只是绕开了权重机制，治标不治本。

怎么查到底哪个规则生效了？

浏览器开发者工具（F12）的「Styles」面板里，被划掉的样式就是被更高权重规则干掉的。重点看：

• 每条规则前面的源码位置（比如 style.css:24）
• 是否带 ⚠️ 图标（表示被覆盖）
• 右侧「Computed」标签页里点开属性，能看到最终生效的来源

注意：内联样式（ style="max-width:100%"）权重是 1000，比 ID 还高；而 !important 是单独机制，不参与权重计算，但会破坏可维护性。

想让 class 覆盖 ID，有哪些靠谱做法？

别硬刚权重，优先考虑结构合理性：

• 把 ID 改成 class：ID 应该唯一且语义化（如页面锚点、JS 获取元素），不该用来做样式主力
• 提升 class 权重：写成 .container .btn.primary（三个 class = 30）仍不如一个 ID（100），但写成 #app .btn（ID + class = 110）就能压过单独的 #primary（100）
• 用属性选择器模拟 class 效果：[class~="btn"] 权重也是 10，和 class 一样，不能破局
• 真要强制覆盖，用 !important 前先确认：是不是 JS 动态加了 ID？是不是该抽离成独立组件避免耦合？

权重计算容易踩的坑

权重不是字符串拼接，也不是简单相加后比较大小：

• #nav .item:hover 是 100（ID）+ 10（class）+ 10（伪类）= 120
• div#nav ul li a 是 100（ID）+ 0（标签）×4 = 100 —— 标签选择器权重为 1，但 4 个加起来也只有 4，远不够翻盘
• body.home.page-id-23 是 0（body 标签）+ 10（.home）+ 10（.page-id-23）= 20，哪怕堆十个 class 也到不了 100
• 同一选择器重复写没用：.btn.btn.btn 还是 10，不是 30

复杂点在于：权重只在“同一条 CSS 规则”内累加，不同规则之间只比总值，不看结构深度。真正难调的往往不是权重本身，而是你没意识到某条规则是从第三方库、框架默认样式或 Shadow DOM 里透出来的。

理论要掌握，实操不能落！以上关于《类选择器与ID选择器权重对比详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！