ID选择器权重高导致样式难覆盖，因其(0,1,0,0)优先级高于任意数量类选择器，且易被第三方库或SSR注入的ID规则静默覆盖，调试困难；强行用更高权重覆盖会破坏可维护性，而ID本应专注唯一锚点定位而非样式控制。
为什么ID选择器权重高反而让样式改不动
ID选择器权重是(0,1,0,0)，而任意数量的类选择器加起来仍是(0,0,n,0)。浏览器比较时，第二位1 > 0就直接终止，后面根本不会看。这意味着你写了.btn.btn-primary.btn-lg也压不过一个#submit——不是“不够多”，而是“没资格比”。一旦项目里混入第三方库（比如 Ant Design 注入的#layout）或 SSR 模板带的 ID 规则，你的类样式就会静默失效。
调试时样式被覆盖却找不到源头
常见现象：.modal.open:hover { color: red; }不生效，但 DevTools 的 “Computed” 面板里颜色被划掉，点开却只看到#root .modal这类规则。问题往往不在你写的 CSS 文件里：
- 运行
document.querySelectorAll('[id]')快速扫一遍页面，确认有没有动态插入或 SSR 生成的隐藏 ID - 检查重置样式（如
reset.css）、UI 框架、甚至服务端模板是否悄悄注入了 ID 规则 - 别只盯着自己写的样式表；
#app可能来自 Vue/React 的根容器，#header可能来自 CMS 输出
想覆盖ID样式，结果越改越乱
硬堆选择器层级（比如#app #main #content .title）看似能赢，实则埋下三颗雷：
- 权重仍是
(0,3,1,0)，虽高于(0,1,0,0)，但已失去可读性，且无法复用 - JS 逻辑强耦合：
document.getElementById('modal')和#modal样式绑定，抽离组件时极易漏改一处 - 重复 ID 导致
document.getElementById只返回第一个，后续 JS 行为不可控，HTML 校验失败
真正该用ID的地方，反而被样式占用了
ID 的核心价值是唯一锚点定位，不是样式控制：
立即学习“前端免费学习笔记（深入）”；
-
label[for="email"]必须匹配input#email，否则表单可访问性失效 - 页面内跳转依赖
id="section2"，这是 HTML 原生语义 - 现代框架中，组件内 ID 很难保证全局唯一，
querySelector('.modal')比getElementById('modal')更可靠
最常被忽略的一点：ID 的高权重不是为了让你多写它，而是提醒你——一旦用了，就等于锁死了修改路径。真正难的不是算清(0,1,0,0)，而是在多人协作、长期迭代中，让样式既不互相压制，又不靠!important续命。
