id选择器生效，因其css权重（100）高于class选择器（10）；即使多个class组合（如.a.b.c）总权重达100，也仅与单个id持平，而多一个id（如#header.nav-active）权重升至200即胜出。
id 选择器和 class 选择器同时作用于同一个元素时，谁生效？
id 选择器一定赢。CSS 权重（specificity）规则里，#header 的权重是 100，而 .btn 只有 10 —— 即便你写十个 class，比如 .a.b.c.d.e.f.g.h.i.j（权重 10×10=100），也只和一个 id 持平；但只要多一个 id，比如 #header.nav-active，权重就变成 200，彻底压倒所有 class 组合。
为什么加了 !important 还没覆盖 id 样式？
这通常不是权重问题，而是声明位置或拼写错误导致的失效。注意：!important 是在「同一条声明内」打破权重规则的，但它不能跨作用域穿透：
- 如果两个
!important声明冲突，还是按权重+源顺序判断 -
style属性里的内联样式（如style="color: red;"）权重为 1000，比任何!important的 CSS 规则都高 - 检查是否误写了
id或class名（大小写、空格、连字符）、是否元素实际没被选中（用浏览器开发者工具的 Elements 面板看 computed styles）
想让 class 覆盖 id，但又不想用 !important 怎么办？
唯一合规且可维护的做法是提升 class 选择器的权重，靠增加 id 不现实（语义错误），靠加 !important 是反模式。可行路径只有两条：
- 把 id 选择器换成 class —— 比如把
#user-card改成.user-card，再用更具体的 class 组合控制，例如.user-card.is-expanded.theme-dark - 用属性选择器模拟更高权重：例如
[id="user-card"]权重是 10+10+1=21，仍低于#user-card（100）；但div[id="user-card"]就是 1+10+1=12，还是不够——所以这条路走不通，别试 - 真正有效的做法是重构：id 应只用于唯一锚点或 js hook，样式一律交给 class 管理
浏览器开发者工具里看到的“strike-through”样式到底是谁赢了？
被划掉的那条，说明它被同权重或更高权重的其他声明覆盖了。重点看右边 Styles 面板里每条规则末尾的「来源」：
- 灰色小字显示
index.css:12表示来自外部文件第 12 行 - 出现
element.style表示内联样式，权重 1000，基本无解（除非 JS 改或加!important） - 如果两个规则权重相同，后声明的生效（源码顺序或加载顺序）
- 注意 Shadow dom 中的样式隔离——外部定义的
#id根本选不到 Shadow 内部元素
真正难处理的不是权重计算本身，而是团队协作中 id 被当样式钩子滥用后留下的技术债。一旦开始用 #main-nav 写样式，后面所有人就只能跟着加 !important 或套更多 class 来对抗，而不是从根上改。