直接写同名选择器无法覆盖第三方库样式，是因为css优先级取决于选择器特异性和层叠顺序，而非less书写顺序；库常使用高特异性选择器或后加载机制导致自定义样式被覆盖。
为什么直接写同名选择器无法覆盖第三方库样式？
Less 编译后生成的 CSS 优先级，取决于最终 CSS 的**层叠顺序**和**选择器特异性**，而非 Less 文件的书写顺序。很多 UI 库（如 Ant Design、Element Plus 的 Less 版本）会把组件样式编译为高特异性选择器（比如 .ant-btn.ant-btn-primary），或通过 @import 在入口文件末尾引入默认主题，导致你写的样式即使在同一个 Less 文件里，也可能被后加载的库样式盖掉。
常见错误现象：.my-btn { color: red; } 完全没生效；浏览器开发者工具里能看到你的规则被划掉（strikethrough）。
- 检查 Chrome DevTools 的 Computed 面板，看实际生效的
color来自哪个规则，点击右侧链接定位到具体 CSS 行 - 避免只靠“写得晚”来覆盖——Less 编译不保证 import 顺序 = CSS 输出顺序（尤其用了
modifyVars或主题插件时） - 第三方库若用 CSS-in-JS（如 emotion）或 scoped CSS（Vue SFC），Less 根本不起作用——先确认它真是 Less 源码可定制的版本
用 !important 是最差解法，但有时真得用
!important 能强行提升优先级，但它破坏可维护性：一旦多个地方滥用，后续修改会陷入“谁加的 !important 更多”的恶性循环。只在两种场景下可接受：
- 覆盖库中也用了
!important的声明（比如某些重置样式） - 临时调试验证是否是优先级问题（验证完立刻删掉）
正确写法示例（Ant Design Button 文字颜色）：
.my-custom-btn {
.ant-btn {
color: #1890ff !important;
}
}
注意：不要对整个组件类直接加 !important（如 .ant-btn { color: red !important; }），这会污染全局，影响其他未定制的按钮。
推荐方案：利用库提供的 Less 变量和 mixin
主流 Less UI 库（Ant Design、Arco Design 等）都暴露了变量文件（如 variables.less）和基础 mixin（如 .button-variant()）。这是官方支持、零副作用的定制方式。
- 找到库的
style/themes/default.less（路径因版本而异，用npm explore antd -- ls -R | grep variables快速定位） - 在你自己的入口 Less 文件顶部，先
@import库的变量，再 覆盖变量值，最后@import库的组件样式 - 关键变量示例：
@primary-color、@btn-border-radius-base、@text-color—— 改这些比硬写选择器安全得多
Ant Design 实操片段：
// my-theme.less @import "~antd/lib/style/themes/default.less"; <p>// 覆盖变量（必须在 import default.less 之后，且在 import components 前） @primary-color: #ff6b35; @border-radius-base: 4px;</p><p>// 再导入需要的组件样式（不是全部！按需导入） @import "~antd/lib/button/style/index.less"; @import "~antd/lib/input/style/index.less";</p>
进阶控制：用 ~"" 和 & 提升选择器特异性
当变量不够用（比如要改某类按钮的 hover 背景，但库没提供对应变量），就需手动增强选择器权重。Less 的 &（父选择器引用）和字符串插值 ~"" 是利器。
- 用
&避免重复写长选择器：.my-section { & .ant-btn { background: #f0f0f0; } }编译为.my-section .ant-btn，特异性比.ant-btn高 - 用
~".ant-btn.ant-btn-primary:hover"绕过 Less 对选择器的解析限制，精准匹配库的原始选择器结构 - 慎用属性选择器增强：
[class*="ant-btn"]虽有效，但可能误伤非目标元素
安全增强示例（仅影响带特定 class 的按钮）：
.my-app {
// 利用父容器提升权重，不污染全局
.ant-btn {
&.ant-btn-primary {
background-color: #2c3e50;
&:hover {
background-color: #1a252f;
}
}
}
}
真正难的不是写多少行 Less，而是搞清你改的到底是哪一层：是库编译前的源变量、运行时注入的 CSS、还是 JS 动态添加的内联样式。多数覆盖失败，根源在没分清这三层，而不是 Less 语法不会用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
