CSS样式不生效主因是权重不足或被高优先级规则覆盖，需用开发者工具查看带删除线的样式及specificity四元组，优先提升选择器精准度而非滥用!important。
样式写了但没生效，大概率不是写错了，而是被另一条规则压住了——specificity才是决定谁赢的裁判。别急着加 !important，先看清楚谁在覆盖你。
怎么看哪条 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（第四位） - 内联样式（
style="..."）是 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 出现顺序加载，把自定义样式放最后
Sass 嵌套不等于作用域隔离
很多人以为写个 .modal { .header { ... } } 就能隔离样式，其实编译后仍是 .modal .header，照样可能被其他地方的 .header 覆盖。
- 真正有效的做法是用唯一前缀 +
&，比如.uikit-modal { &__header { ... } }，编译出.uikit-modal__header -
&必须紧贴选择器，写成& .header（中间有空格）会失效，变成全局.header - 前缀建议用项目/组件域名称（如
auth-、dash-），避免泛化词如my-或custom- - 用
@use替代@import，变量和 mixin 默认私有，天然形成模块边界
最易被忽略的点：权重干扰项往往藏在继承、伪类绑定、第三方库加载时机里，而不是你写的那几行 CSS 本身。排查时别只盯源码，一定要看开发者工具里实时计算出的 Computed 和 Styles 面板。
