ID选择器赢，因其权重100高于class选择器的10；同元素同属性时，ID规则覆盖class规则，浏览器开发者工具中被划掉的样式即被更高权重要素覆盖。
类选择器和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="color: green;"）权重是 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 里透出来的。
