id选择器优先级高于类选择器，因css权重按四元组(内联,id,类/伪类/属性,标签/伪元素)逐位比较，id存在时第二位为1必胜；调试应查隐藏id，避免滥用!important。
ID选择器优先级确实高于类选择器，这不是经验说法，而是浏览器严格按W3C规范执行的权重比较结果——#header 总会覆盖 .header，哪怕后者写在后面、嵌套更深、数量更多。
CSS权重不是“加总”，而是四元组逐位比较
浏览器不计算“总分”，只比 (内联, ID, 类/伪类/属性, 标签/伪元素) 这个四元组，从左到右一位一位判大小：
-
#nav .item是(0,1,1,0)（1个ID + 1个类） -
.nav .item .active .is-hovered是(0,0,4,0)（4个类）
比较时先看第一位（内联）：都是0 → 再看第二位（ID）：1 > 0 → 直接结束，#nav .item 胜出。后面两位根本不会被读取。
这就是为什么写十个 .btn 也压不过一个 #submit：10个类仍是 (0,0,10,0)，第二位始终是0，而ID只要出现一次，第二位就是1。
调试时样式不生效？先查有没有隐藏的ID在压制
常见现象：.modal.open:hover { color: red; } 写了但没反应，鼠标移上去还是灰色——大概率是某个父容器写了 #app .modal 或第三方库注入了 #root .modal。
- 打开浏览器开发者工具，切到“Computed”面板，点开目标属性（如
color），看哪条被划掉、被谁覆盖 - 别只盯自己写的 CSS 文件；重置样式（reset.css）、UI 框架（如 Ant Design 的
#layout规则）、SSR 渲染生成的 ID 都可能参与层叠 - 用
document.querySelectorAll('[id]')快速扫一遍页面，确认有没有意外存在的 ID
JS里该用 document.getElementById 还是 document.querySelector？
日常操作优先用 document.querySelector('.modal')，而不是 document.getElementById('modal')：
- ID 在 React/Vue 中极易重复（比如列表项动态渲染），
getElementById只返回第一个匹配元素，后续逻辑可能静默失败 -
querySelector支持任意合法选择器，包括[data-testid="modal"]、.modal.is-visible，语义更清晰、行为更可控 - 仅当必须满足可访问性要求（如
label[for="email"]关联input#email）或锚点跳转时，才保留 ID 的使用
想让类覆盖ID，唯一合规做法是提升具体性，不是堆类名
不要试图靠 .btn.btn-primary.btn-lg 去赢 #submit——它权重仍是 (0,0,3,0)，远低于 (0,1,0,0)。
- 正确做法是组合 ID 和类：
#submit.btn（权重(0,1,1,0)），既复用类名又明确作用域 - 或改用属性选择器：
[data-action="submit"]权重同类（(0,0,1,0)），无全局唯一限制，适合组件化场景 -
!important虽能强制覆盖，但在多人协作项目中极易引发下游样式意外失效，应视为最后手段
真正容易被忽略的是：ID 的高权重在现代工程中常是包袱而非优势——它破坏封装、阻碍复用、增加调试成本。权重规则本身很机械，但它的实际影响，往往藏在框架默认样式、服务端注入的 ID 或自动化测试脚本里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
