不能靠!important强制覆盖第三方库样式，因其仅批量标记mixin属性，不提升选择器权重；有效方式是调整@import顺序、嵌套提升特异性、添加命名空间前缀，!important仅限调试或覆盖内联样式。
不能靠 !important “强制覆盖”第三方库样式——它只是把 mixin 里所有属性打上 !important 标签，不解决选择器权重本质问题。
Less 中 !important 只作用于 mixin 调用，不是 CSS 层面的覆盖开关
你在 Less 里写 .btn-reset() !important，编译后生成的是：color: #000 !important;margin: 0 !important;
——它不会帮你“压过”第三方库里 #header .nav-item.active 这种高特异性选择器，也不会绕过内联样式（style="color:red"）的天然高权重。
常见错误现象：
- 写了
.my-button { .ant-btn-reset() !important; }，但按钮颜色还是被 Ant Design 的.ant-btn-primary覆盖 - 以为
!important是“万能覆盖键”，结果 DevTools 里看到自己的规则灰掉，实际生效的是第三方带!important的那条
真正有效的覆盖方式：优先级 + 顺序 + 前缀
Less 编译后仍是标准 CSS，层叠规则没变。有效手段必须直击权重源头：
立即学习“前端免费学习笔记（深入）”；
- @import 顺序必须严格：自定义变量和覆盖样式文件，一定要在第三方库 Less 文件 之前 引入，否则变量覆写无效、CSS 规则排在前面，白写
-
用嵌套提升选择器权重：比如写
.my-page { & & { .ant-btn { color: blue; } } }→ 编译为.my-page.my-page .ant-btn，特异性从 10 升到 20，稳压多数 UI 库默认规则 -
命名空间前缀兜底：把整个组件样式包进
.my-app { ... }，生成.my-app .button，避免类名冲突；但需 HTML 容器配合加class="my-app"
什么时候才该用 !important？仅限两类场景
它不是覆盖工具，而是“编译期批量标记指令”，适用范围极窄：
- 临时调试时快速验证样式是否生效（上线前必须删掉）
-
覆盖无法控制的内联样式（如第三方 SDK 动态注入的
style="width:200px"），此时.owl-item.active { width: auto !important; }才有意义
注意：.mixin(!important) 是无效写法，!important 必须紧贴括号后，如 .reset() !important；塞进括号里会被当字符串参数忽略。
最易被忽略的点：你以为加了 !important 就万事大吉，但浏览器真正比的是“谁的选择器更具体 + 谁的声明更靠后 + 谁的 !important 更早被解析”。三者缺一不可，而 Less 里的 !important 只管第三项。
