ID选择器优先级高于类选择器，主要源于CSS的权重计算规则。在CSS中，选择器的优先级由其类型和具体写法决定，而ID选择器的权重高于类选择器，这使得在样式冲突时，ID选择器的样式会覆盖类选择器。1. CSS选择器权重计算规则CSS中的选择器有不同的权重值，这些值决定了在多个样式规则冲突时，哪个样式会被应用。权重值从低到高大致如下：*通用选择器（如 ``）**：权重为 0元素选择器（如 div）：权

CSS中ID选择器优先级高于类选择器，并非经验之谈，而是浏览器严格遵循W3C规范、基于四元组权重（内联、ID、类/伪类/属性、标签）逐位比较的确定性结果——只要存在ID，第二位即为1，直接胜出，无论类选择器数量多少或位置多靠后；这一机制虽保障了层叠逻辑的可预测性，却在现代前端工程中常成为调试陷阱与复用障碍：隐藏的ID可能来自框架、SSR或第三方库，轻易压制精心编写的类样式；因此，应避免滥用ID控制样式，优先使用语义化类名、属性选择器或ID与类组合提升具体性，将!important留作最后手段，真正理解权重不是“加法”而是“字典序比较”，才能高效定位问题、写出健壮可维护的CSS。

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 或自动化测试脚本里。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ID选择器优先级高于类选择器，主要源于CSS的权重计算规则。在CSS中，选择器的优先级由其类型和具体写法决定，而ID选择器的权重高于类选择器，这使得在样式冲突时，ID选择器的样式会覆盖类选择器。1. CSS选择器权重计算规则CSS中的选择器有不同的权重值，这些值决定了在多个样式规则冲突时，哪个样式会被应用。权重值从低到高大致如下：*通用选择器（如 ``）**：权重为 0元素选择器（如 div）：权重为 1类选择器（如 .class）：权重为 10属性选择器（如 [type="text"]）：权重为 10伪类选择器（如 :hover, :focus）：权重为 10ID选择器（如 #id）：权重为 100内联样式（如 style="..."）：权重为 1000因此，ID选择器的权重为 100，类选择器为 10，所以 ID 选择器的优先级更高。2. **为什么ID选择器优先级更高》文章吧，也可关注golang学习网公众号了解相关技术文章。