CSS样式不生效主因是选择器权重（specificity）不足，而非书写错误；可通过Chrome开发者工具查看带删除线的属性及specificity四元组值（如0,0,2,1）定位被覆盖规则。
样式不生效，八成不是写错了，而是被更高权重的选择器压住了——specificity才是真正在幕后判胜负的裁判。
怎么看哪条 CSS 规则赢了？
打开 Chrome 开发者工具（F12），用 Ctrl+Shift+C 选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的属性。鼠标悬停上去，会显示 specificity is lower than another rule，并附带一个四元组值，比如 0,0,2,1：
- ID 选择器（如
#header）贡献 100（对应第二位） - 类、属性、伪类（如
.btn、[disabled]、:hover）各算 10（第三位） - 标签、伪元素（如
div、::before）各算 1（第四位） - 内联样式（
）是 1000（第一位），基本不可逆
!important 不改变这个值，它只是让该声明跳过层叠顺序“插队”——但另一个 !important 还是要比权重。
为什么加了类名还是不生效？
常见错觉：你写了 .card__title，但页面里同时存在 .modal .header h2，后者权重是 0,0,2,1（两个类 + 一个标签），而前者只有 0,0,1,0，直接被盖掉。
立即学习“前端免费学习笔记（深入）”；
- 确认
class名拼写、连字符、空格完全一致 ——.card .title和.card > .title是两回事 - 第三方库（如 Ant Design）常在末尾引入，且用深度嵌套或 ID，你自己的
.btn很难赢过它的.ant-btn-primary -
<style scoped>或 CSS Modules 会自动加属性选择器（如div[data-v-abc123]），你写的div .title根本匹配不到真实 DOM - 继承属性（如
color、font-size）不参与权重计算，它们只是“冒泡上来”，不是你那条规则赢了
怎么安全提高选择器优先级？
优先用精准选择器，而不是堆砌或硬加 !important。后者短期解急，长期会让后续修改变成“谁最后加 !important 谁赢”的混乱局面。
- 改用 BEM 命名（如
.card__title--large）替代无意义嵌套（.card .content .title），权重稳定且语义清晰 - 用子选择器
>替代空格，例如.dialog > .footer比.dialog .footer更可控 - 必要时用属性选择器兜底：
[data-role="tooltip"]权重 = 10，和类持平，但更不易被意外覆盖 - 避免
@import：它解析滞后，容易打乱预期加载顺序；多个<link>按 HTML 出现顺序加载，把自定义样式放最后
Vite 中 CSS Modules 局部样式被全局样式覆盖怎么办？
CSS Modules 的类名（如 .btn_abc123）权重仍是 10，如果全局有 .btn.btn-primary（权重 20），照样被压。别指望哈希后缀能“免疫”权重规则。
- 在模块文件中对类名“自嵌套”：
.btn { &.btn { color: red; } }，生成.btn.btn_abc123，权重翻倍 - 结合父容器类名提升权重：
.card { .title { font-size: 18px; } }→ 实际为.card_xyz .title_abc - 给全局样式“收口”：把宽泛的
.btn改成.global-theme .btn，避开组件内部作用域 - 动态插入的
<style>默认插入<head>末尾，通常能盖过早先引入的，但需确认是否真进了 CSSOM 树
真正难缠的不是权重数字本身，而是那些看不见的加载顺序、作用域隔离、构建时的样式合并——查 Network 面板确认文件是否 200 加载，看 Elements 面板里最终渲染的 class 是否和你写的完全一致，比死磕 !important 管用得多。
