直接加 !important 是放弃控制权，会导致后续样式微调高风险；.el-button.my-primary 比 .my-primary 更可靠，因其权重更高、依赖组件库稳定语义类名，且抗结构变更。
直接加 !important 不是覆盖，是放弃控制权——它会让后续任何样式微调都变成高风险操作。
为什么 .el-button.my-primary 比 .my-primary 更可靠
Element Plus、Ant Design 等主流组件库生成的 DOM 会稳定携带语义化类名（如 el-button、ant-btn），这些不是随机哈希，而是长期兼容的公开接口。单独写 .my-primary 权重只有 10；加上组件库原生类后变成 20，天然压制其内部规则。
- 即使组件库内部结构从
<button></button>改成<span role="button"></span>，只要还挂el-button类，你的样式就继续生效 - 避免用
div .my-primary这类泛化选择器，容易误伤其他组件 - 不要依赖组件库未文档化的私有类（如
el-button__inner），它们可能在小版本更新中被删或重构
什么时候必须用 !important，以及怎么用才不翻车
仅当遇到以下情况时，!important 才是合理退路：组件库用内联 style 属性写死样式（如 style="color: #999"），或使用 Shadow DOM 封装且不支持 ::part()。
- 必须搭配高特异性选择器一起用，例如：
.my-app .ant-input[disabled] { color: #666 !important; }，而不是裸写.my-input { color: #666 !important; } - 禁止在全局 CSS 文件顶部批量加
!important，这等于给整个样式系统埋雷 - 如果发现
!important失效，先检查 DevTools 中该元素是否被 Shadow DOM 包裹，或是否有更高优先级的内联style
Webpack/Vite 项目中 CSS 加载顺序失效的真实原因
你以为把自定义 CSS 放在 main.ts 最后 import 就万事大吉？错。很多 UI 库（如 MUI、Ant Design）通过 JS 动态注入样式，实际执行时机晚于你的 CSS 文件加载完成时间。
- Vite 项目确认顺序：
import 'antd/dist/reset.css'必须在import './index.css'之前 - Webpack 项目检查
mini-css-extract-plugin是否把组件库样式和你的样式拆到了不同 chunk，导致 HTML 中<link>标签顺序不可控 - 临时验证方法：在 HTML 的
底部手动加一个<link rel="stylesheet" href="/your-overrides.css">，看是否生效
真正难的从来不是写对一行 CSS，而是判断「这个样式到底被谁拦住了」——是 Shadow DOM？是动态注入？是哈希类名？还是构建工具悄悄重排了 <link> 顺序？查不到源头，所有 !important 都只是延缓爆炸时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
