在浏览器开发者工具中，被划掉的css规则表示被覆盖，鼠标悬停可查看覆盖来源；需确认实际生效的是哪条规则，注意scoped/module类名哈希、内联样式、@import顺序、选择器权重及less编译错误等根本原因。
看浏览器开发者工具里哪条规则被划掉
打开 DevTools → 选中元素 → 右侧 Styles 面板里，被覆盖的属性会带删除线（text-decoration: line-through），鼠标悬停能看到“color overridden by .ant-btn”这类提示。重点不是找“谁写的”，而是确认“谁赢了”。
- 注意检查是否启用了
scoped（Vue）或module（React），此时类名已被哈希重命名，你写的.btn可能根本没匹配到真实 DOM 上的.btn_abc123 - 如果看到
element.style（内联样式）或[data-v-xxx]属性选择器，说明是 scoped 穿透或动态样式在起作用 - 展开每条规则，点击右侧链接可跳转到源码位置——但 Less 编译后是 CSS，这里显示的是最终输出，不是 .less 原文件
查 Less 编译顺序和 @import 位置
@import 不是模块加载，是文本拼接。后 @import 的文件，其 CSS 规则在最终输出里排得更靠后，同权重下自然覆盖前面的。
- 常见错误：把 UI 框架的
ant-design.less放在你自己overrides.less后面@import，结果你的覆盖规则永远编译在前面 - 正确做法：先
@import 'variables.less';，再@import 'ant-design.less';，最后@import 'my-overrides.less'; - 如果用 Webpack + less-loader，检查
additionalData是否把变量注入到了所有文件开头，可能让!default失效
验证选择器权重是否真够高
Less 编译后仍是标准 CSS，权重规则没变：.a.b.c 比 .a.b 高，#id .class 比纯 class 高。别指望 Mixin 自动提权，它只是帮你写得更准。
- 避免滥用
!important：它会让后续任何常规覆盖失效，调试时 DevTools 里也难定位来源 - 用
& &嵌套提升权重最轻量：写.my-page { & & { .ant-btn { color: red; } } }→ 编译为.my-page.my-page .ant-btn，特异性从 10 升到 20 - 慎用
extend()：它不生成新选择器，只合并已有规则，对覆盖基本没用；真正可控的是带父选择器的自定义 mixin，如.override('.ant-btn')
确认变量和语法没让样式“压根没生成”
Less 属性不生效，常不是优先级问题，而是编译阶段就失败或生成了错误选择器。
- 变量未定义（如
NameError: variable @color is undefined）会导致整个文件编译中断，CSS 根本不会输出 - 嵌套过深或
&使用错误：比如写成.parent { &.child { ... } }，实际生成的是.parent.child，而非.parent .child - CSS Modules 场景下，必须用
import styles from './index.module.less'，然后className={styles.btn}；直接写className="btn"就等于没用样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
