!important 不是首选因破坏可维护性，但绕不开框架样式时可用；应优先提升选择器特异性、控制加载顺序、使用 scoped 策略或框架主题变量。
为什么 !important 不是首选，但有时又绕不开
框架样式（比如 Bootstrap、Element Plus）通常用高权重选择器或内联 style 注入，单纯在外部 CSS 里写同名规则大概率被忽略。直接加 !important 能生效，但会破坏可维护性——尤其当多个组件共用同一类名时，一个 !important 可能意外压垮其他地方的定制。
真正可控的做法是提升选择器特异性（specificity），同时确保样式表加载顺序靠后。
- 避免对框架基础类（如
.btn、.el-input）直接覆盖，优先用自定义 class 或 scoped 策略 - 如果必须覆盖，用更具体的选择器：比如把
.el-input改成.my-form .el-input.is-disabled -
!important仅用于无法通过结构控制的场景（如第三方组件动态插入的内联 style）
外部样式表中提升选择器权重的实操方式
CSS 权重不是靠“多写几遍”或“放后面就行”，而是由选择器类型组合决定。标签选择器（div）权重最低，ID（#app）最高，类/伪类/属性选择器居中。
- 不要只依赖类名叠加：
.el-button .el-button--primary和.el-button--primary权重一样，后者反而更易被覆盖 - 用父容器限定范围：
.my-page .el-button--primary比单独.el-button--primary多 10 分权重 - 必要时加伪类但别滥用：
.el-button--primary:not(.disabled)提升权重且带逻辑约束 - 避免 ID 选择器：虽然权重高，但违反组件化封装原则，也难复用
引入顺序和 <link> 位置的关键细节
样式表后置引入只是前提，不是万能解。浏览器按 HTML 中 <link> 出现顺序解析 CSS，但若框架样式是通过 JS 动态注入（如 Vue 组件 <style scoped></style> 编译后插入），它可能晚于你的外部 CSS 执行。
立即学习“前端免费学习笔记（深入）”；
- 确保你的外部 CSS
<link>放在框架 CSS 之后，且在前闭合 - 不要指望
@import替代<link>：它会阻塞渲染，且权重计算更不可控 - 如果用构建工具（Vite/Webpack），检查 CSS 提取插件是否把框架样式打包进同一个文件，导致“后置”失效
- 可在 DevTools 的 Elements 面板里右键元素 → “Force element state” 触发伪类，验证选择器是否真被应用
Vue / React 项目里更稳妥的替代方案
纯外部 CSS 覆盖框架样式，在现代前端工程里越来越容易失控。尤其当组件使用 scoped 或 CSS-in-JS，你的外部规则根本匹配不到内部生成的类名。
- Vue 中优先用
<style scoped></style>+::v-deep()（或新语法:deep()）穿透到子组件 - React 中用 CSS Modules 或 emotion 的
cssprop 直接绑定高权重规则 - 框架提供主题变量时（如 Ant Design 的
@primary-color），改 less/scss 变量比硬覆盖更干净 - 实在要全局覆盖，把定制样式写进框架的主 CSS 入口（如
main.scss），而不是独立override.css
最常被忽略的一点：框架版本升级可能重写 CSS 结构，昨天有效的选择器今天就失效。比起死磕权重，留好回归测试点或用自动化视觉比对更省心。
