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），真正实用的方式只有几个：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• 把 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 规则

权重不是魔法，它是可算、可查、可推演的规则。真正难的不是算对数字，而是让 class 的命名和组合方式，自然承载语义与层级，而不是靠堆叠选择器强行抢权。