id选择器不应用于css样式，因其权重高位固定为1导致类名无法覆盖，且易引发重复id、可访问性及维护问题；仅应保留于for/id关联和锚点跳转等必要场景。
浏览器不是在“加分数”，而是在比四元组
很多人以为 #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)，高位已败。
- 组合 ID 和类：
#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，否则表单可访问性失效；跳转也依赖 id="section2"。
CSS 中用 ID 做样式，绝大多数情况属于误用：
- 现代前端框架（React/Vue）里，组件内 ID 很难保证全局唯一
-
document.getElementById查找容易因动态渲染失败 - 服务端渲染场景下，重复 ID 会导致 HTML 校验失败，浏览器可能静默忽略后续同名 ID
- JS 获取元素应优先用
document.querySelector('.modal')而非document.getElementById('modal')
真正需要 ID 的地方极少：仅限可访问性绑定（for/id 关联）或锚点跳转。其他时候，类才是默认选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
