id选择器生效，因其权重（100）远高于class（10）；即使多个class组合也难超越单个id，除非改用内联样式、提升class选择器权重、转为class命名或使用!important。
class 和 id 选择器同时匹配同一个元素时，谁生效？
浏览器按选择器权重（specificity）决定最终应用哪条样式。id 选择器权重远高于 class：一个 #header 的权重是 100，而一个 .btn 只有 10。哪怕写十个 class，比如 .a.b.c.d.e.f.g.h.i.j（总权重 100），也只和单个 id 持平——但实际中极少出现恰好打平的情况，id 几乎总是胜出。
- 权重计算不看书写顺序，也不看 CSS 文件引入先后
- 内联样式（
style="..."）权重为 1000，比任何 id 都高 -
!important是另一套机制，它绕过权重，但会破坏可维护性，不建议用于解决 class/id 冲突
为什么加了 class 还没 id 生效？检查是否真被匹配
常见错觉是“我写了 .active，但它没起作用”，其实可能是：
- 元素根本没有这个 class，或者拼写错误（
.actve） - class 所在的 CSS 规则被更早的、更高权重的规则覆盖了（比如父级用了
#nav .item，权重已是 110） - 浏览器开发者工具里看到的“被划掉”样式，不一定来自 id，可能来自另一个 class 组合（如
.container .sidebar .button权重 30）
用 DevTools 的 Styles 面板点开每条规则，看右侧是否标有 “specificity: 0,1,0,0” 这类数字，对比确认。
想让 class 覆盖 id，有哪些可行办法？
直接让 class 权重超过 id 不现实（得写 11 个 class 才能压过 1 个 id），真正实用的方式只有几个：
立即学习“前端免费学习笔记（深入）”；
- 把 id 选择器换成 class：这是最干净的解法。id 应该只用于唯一、JS 定位或锚点，不该承担样式职责
- 提升 class 规则的权重：例如从
.btn改成div.btn（权重从 10 升到 11），或.modal .btn-primary（20） - 使用内联样式（
style="color: red"）——仅限动态、临时、不可复用的场景 - 在 class 规则后加
!important——仅当无法修改结构或第三方 CSS 时兜底，且必须加注释说明原因
避免写 #header .nav .item.active 这种“用 id 拉高权重”的反模式，它既耦合结构，又掩盖设计意图。
真实项目中容易被忽略的细节
- ID 选择器在 CSS 中一旦出现，就几乎锁死了样式的可扩展性。比如
#user-panel 后续想复用到另一个用户模块？就得复制整套样式或改名，非常脆弱
- 某些 UI 库（如 Bootstrap）完全不用 id 做样式，全部基于 class 组合，正是为了规避权重混乱
- Vue/React 组件 scoped style 或 CSS Modules 会自动加属性选择器（如
[data-v-abc123]），本质是把 class 权重悄悄抬高了一档，这也解释了为什么它们常能“压过”全局 id 规则
#user-panel 后续想复用到另一个用户模块？就得复制整套样式或改名，非常脆弱[data-v-abc123]），本质是把 class 权重悄悄抬高了一档，这也解释了为什么它们常能“压过”全局 id 规则权重不是魔法，它是可算、可查、可推演的规则。真正难的不是算对数字，而是让 class 的命名和组合方式，自然承载语义与层级，而不是靠堆叠选择器强行抢权。
