浏览器通过四元组(a,b,c,d)比较CSS选择器权重，从左到右逐位比对，高位相等才看下一位；ID选择器因b位为1必胜类选择器，故堆砌类名无效，应改用组合选择器、属性选择器或语义化class替代。
浏览器不是在“加分数”，而是在比四元组
很多人误以为 #header 比 .header 高是因为“100 > 10”，但真实机制更严格：浏览器把每个选择器转成一个四元组 (a,b,c,d)，分别是（内联样式数、ID数、类/属性/伪类数、标签/伪元素数），然后从左到右逐位比较，高位相等才看下一位。
所以：#nav .item 是 (0,1,1,0)，.nav .item .active .is-hovered 是 (0,0,4,0)。
比较时先看第一位（都是 0）→ 再看第二位：1 > 0 → 立刻判定前者胜出。后面两位根本不会被读取。
这就是为什么写十个类也赢不了一个 ID —— 不是“加起来不够”，而是第二位始终是 0，压根没机会参与比较。
调试时样式不生效？先查有没有隐藏的 ID 在压制
常见现象：.modal.open:hover { color: red; } 写了但鼠标移上去没反应。大概率是父容器或第三方库悄悄注入了类似 #root .modal 或 #app .modal 的规则。
排查建议：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 → “Computed” 面板 → 找到被划掉的属性，点开看被谁覆盖
- 运行
document.querySelectorAll('[id]')快速扫一遍页面，确认有没有动态生成或 SSR 注入的意外 ID - 别只盯着自己写的 CSS 文件；重置样式（reset.css）、UI 框架（如 Ant Design 的
#layout）、甚至服务端渲染模板都可能带 ID 规则
想覆盖 ID 样式？别堆类名，换思路
用 .btn.btn-primary.btn-lg 去压 #submit 是无效的——它权重仍是 (0,0,3,0)，而 ID 是 (0,1,0,0)，高位已败。
真正可行的做法：
- 组合使用：
#submit.btn（权重(0,1,1,0)），既复用类又明确作用域 - 改用属性选择器：
[data-action="submit"]，权重同级类（(0,0,1,0)），无全局唯一限制，适合组件化场景 - 删掉 ID，改用语义化 class + BEM 或 CSS Modules 隔离，从源头规避权重博弈
强行用 !important 或内联样式（）能绕过，但会破坏可维护性，且无法解决 JS 动态渲染时 ID 重复导致的 document.getElementById 只返回第一个的问题。
ID 该用在哪儿？锚点和表单绑定才是正经用途
ID 的核心语义是「页面唯一标识」，不是样式钩子。现代前端中，它真正不可替代的场景只有两个：
-
label[for="email"]必须精确匹配input#email，否则可访问性失效 - 页面内锚点跳转：
a[href="#section2"]→div[id="section2"]
除此之外，用 ID 写样式几乎全是坑：
- React/Vue 列表项动态渲染时，
id="item-1"很容易重复，getElementById返回结果不可靠 - CSS 中依赖 ID 会让组件难以复用、抽离、测试
- 想覆盖它，只能靠另一个 ID、内联样式或
!important——三者都更难维护
真正难的不是算清 (0,1,0,0)，而是意识到：高优先级不是特权，而是设计约束。滥用 ID 写样式，等于主动放弃工程化能力。
