!important 不是首选方案，因其破坏样式可维护性并易与第三方库冲突；应优先通过提高选择器特异性、作用域限定或JS层干预来覆盖样式。
为什么 !important 不是首选方案
它确实能强制覆盖，但会破坏样式可维护性：后续任何修改都得用更暴力的 !important 去覆盖，形成恶性循环。第三方库（如 Ant Design、Element Plus）常自带高权重选择器，盲目加 !important 还可能干扰其内部状态样式（比如 .ant-btn:disabled 的颜色逻辑）。
提高选择器权重的实操方式
权重不是靠堆砌标签，而是按 CSS 特异性规则叠加。优先用以下组合：
- 用组件级类名 + 第三方类名，例如
.my-form .ant-input比单独.ant-input权重高 - 避免用 ID 选择器（
#app .ant-btn），虽权重高但耦合强，且现代框架（Vue/React）中 ID 很难稳定复用 - 慎用属性选择器兜底，如
[class*="ant-btn"]，兼容性好但性能略低，仅在类名动态生成时考虑 - 不要依赖标签名堆叠，
div div div .ant-btn不仅难读，还易被父级结构变动直接打断
通过作用域限定自然隔离样式
这是 Vue / React / Svelte 等支持 scoped 样式的框架推荐做法，本质是让选择器只匹配当前组件节点：
- Vue 单文件组件中加
，编译后自动为选择器和元素添加唯一 data 属性，如.btn[data-v-f3f2a1c] - React 中可用 CSS Modules，
import styles from './Button.module.css'，类名自动哈希化，不会与第三方类冲突 - 若用普通 CSS，手动加命名空间前缀（如
.myapp-xxx）并确保所有第三方组件外层包裹该类，再写.myapp-xxx .ant-card
遇到内联样式或 JS 动态插入的样式怎么办
这类样式权重固定为 1000，高于任何外部 CSS 选择器。此时必须换思路：
立即学习“前端免费学习笔记（深入）”；
- 检查是否真需覆盖——有些内联样式是业务逻辑所需（如拖拽位置、动画进度），强行覆盖会导致功能异常
- 用
!important是最后手段，且应限制在最小范围，例如.my-modal .ant-modal-body { height: 200px !important; } - 优先从 JS 层干预：Ant Design 的
className、rootClassName或styleprop 入口传入定制样式，比硬覆盖更可控
