滥用!important不是解法而是掩盖特异性失控；真正策略是主动管理权重来源。常见失效因更高优先级!important规则或内联样式覆盖，因内联样式>外部CSS中!important>普通规则。
直接结论：滥用 !important 不是覆盖失效的“解法”，而是掩盖了选择器特异性（specificity）失控的真实问题；真正有效的策略是主动管理权重来源，而非用 !important 覆盖再覆盖。
为什么加了 !important 还没生效？
常见错误现象是：你写了 .btn { color: red !important; }，但按钮文字仍是蓝色。这不是浏览器 bug，而是因为存在更高优先级的 !important 规则（比如第三方库中 button[disabled] { color: blue !important; }），或者该样式被内联 style 覆盖（style="color: blue !important"）——此时你的 !important 仍输在“来源顺序”之后（内联样式 > 外部 CSS 中的 !important）。
关键点：!important 不是绝对无敌，它只在同类型来源中胜出；不同来源之间仍有层级：内联样式 > 外部/内部 CSS 中的 !important > 普通 CSS 规则。
- 检查 DevTools 的「Computed」面板，看被划掉的规则是否也带
!important - 确认目标元素是否被 JS 直接写入了
style属性（含!important） - 避免在 Sass 中用
@extend复制带!important的规则，会隐式传播权重
如何用 Sass 主动控制 specificity 而不依赖 !important
Sass 本身不提升权重，但能帮你写出更精准、更可控的选择器结构。重点不是“嵌套更深”，而是“语义更准”。
立即学习“前端免费学习笔记（深入）”；
- 用唯一前缀限定作用域：
.uikit-button { &__icon { margin-right: 4px; } }→ 编译为.uikit-button__icon，天然比.btn .icon权重高且无歧义 - 避免无意义的多层嵌套：
.page .section .content .title权重虽高（0,4,0），但脆弱难维护；改用.article-title+ 明确语义类更可靠 - 必要时用属性选择器提权：
button[data-role="primary"]权重等同 class（0,1,0），但比泛化类名更不易冲突 - 慎用 ID：虽然
#submit-btn权重高（1,0,0），但违反组件可复用原则，Sass 中几乎不该出现
Scoped 样式（Vue/React）与 el-popper 类组件的特殊处理
像 el-autocomplete 这类将弹层挂载到 <body> 的组件，::v-deep 或 /deep/ 在 Vue SFC 中已废弃，且 scoped 样式根本无法命中脱离当前 DOM 树的节点。
- 必须用全局样式接管：
<style lang="scss">块中直接写.el-popper { background: #2b2b2b; } - 若需局部控制，改用
popper-classprop 传入自定义类名：<el-autocomplete popper-class="my-autocomplete-popper">，再配.my-autocomplete-popper { ... } - 不要对
.el-popper加!important——它本就是全局渲染，加了反而干扰其他同类组件 - 在 React 中使用类似方案：
popperClassName或通过getPopupContainer指向有 scoped class 的父容器
真正难的不是让某条样式生效，而是让整套样式系统具备可预测的权重演进路径。一旦开始靠 !important 解决问题，就等于放弃了对 specificity 的主动设计权——后面每加一个 !important，都在为下一次覆盖埋雷。
