浏览器按CSS源码顺序和权重决定最终样式，非HTML中class书写顺序；权重相同时，后声明的规则胜出；可用开发者工具Computed面板验证生效来源。
多个 class 同时写在元素上，谁生效？
浏览器按 CSS 规则的**源码顺序**和**权重**决定最终样式，不是按 HTML 里 class 的书写顺序。比如 <div class="btn primary">，如果 <code>.primary 在 CSS 文件里写在 .btn 后面，且两者权重相同，.primary 就会覆盖 .btn 的同名属性。
- 权重相同时，后声明的规则胜出（CSS 文件里的位置，不是 HTML 中
class属性里的顺序） - 哪怕
class="primary btn"，只要.btn { color: red; }写在.primary { color: blue; }后面，最终还是红色 - 用浏览器开发者工具的 “Computed” 面板看实际生效来源，比猜更可靠
CSS 选择器权重怎么算才不翻车？
权重不是“谁写得长谁赢”，而是分层计数：内联样式 > ID > 类/属性/伪类 > 标签/伪元素。关键陷阱是把 .btn.primary 当成“两个 class 所以权重翻倍”——其实它和 .btn 是同一级（都是 class），只是多了一个 class 条件，权重没变。
-
.btn和.btn.primary权重相同（都是 0,0,2,0） -
#header .nav li.active权重是 0,1,3,1（1 个 ID + 3 个 class + 1 个标签） - 用
!important能破权重，但会破坏可维护性，优先用更精确的选择器代替 - 避免靠堆 class 提升权重，比如
.btn.btn.btn--primary—— 看似“加强”，实则混乱且不可控
如何安全地让某个 class 强制接管样式？
真要确保某个 class 生效，别赌顺序或瞎堆权重，直接用更具体的选择器锚定上下文。比如组件内部的 .icon 不该被全局 .icon 干扰，就加一层父级限定。
- 把
.icon { width: 16px; }改成.card .icon { width: 16px; }，权重升到 0,0,2,1，稳压纯 class - 用 BEM 命名（如
.button--large）本质是靠命名隔离，而非权重博弈 - 现代方案：CSS Modules 或 scoped style（Vue/React）天然隔离，不用手动斗权重
- 警惕继承样式干扰：比如
font-size从父级继承下来，可能比你写的.btn规则更早生效
为什么改了 CSS 却没反应？检查这三处
常见假“覆盖失败”，其实是缓存、拼写或作用域问题。权重和顺序只是其中一环。
立即学习“前端免费学习笔记（深入）”；
- 浏览器缓存了旧 CSS 文件，强制刷新（
Ctrl+Shift+R）或禁用缓存再试 - class 名写错大小写（
.Btn≠.btn），或 HTML 里漏了点（class="btn primary"不是class="btn, primary"） - CSS 文件没加载成功（检查 Network 面板中 CSS 请求状态码是否为 200）
- 样式被 JS 动态写入内联样式（
element.style.color = 'red'），它权重最高，得用 JS 改或加!important
