必须在无法通过常规层叠规则覆盖样式时使用 !important，典型场景包括：第三方库样式冲突、动态内联样式需强制覆盖、调试验证；它仅作用于单个属性，不改变选择器权重比较逻辑，且对继承无效。

什么时候必须加 !important

只有当外部样式或内联样式无法通过常规方式覆盖时，才考虑加 !important。典型场景包括：

• 第三方 UI 库（如 Ant Design、Element Plus）注入了 style 属性，你无法修改组件源码，又必须临时修正某条视觉表现（比如强制显示某个弹窗的 z-index）
• React/Vue 组件用 :style 或 style={{}} 动态设置了 opacity: 0.3，而你需要在 CSS 文件里让其始终为 1，且不能改 JS
• 调试阶段快速验证某条规则是否生效——比反复删改选择器更省时间，但别提交到主干

注意：!important 不是“全局开关”，它只对当前声明的单个属性起效，比如 .btn { color: red !important; font-size: 14px; } 中只有 color 被提权。

!important 的优先级不是“绝对最高”

两个都带 !important 的规则相遇时，浏览器仍按原始选择器权重决定谁胜出。例如：

#header .nav a { color: blue !important; }
.nav a { color: red !important; }

前者权重为 (0,1,2,1)，后者为 (0,0,2,1)，所以 blue 生效。你以为加了 !important 就能赢，其实只是跳过了普通层叠，没跳过权重比较本身。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

另外，!important 对继承无效：父元素写 .parent { font-size: 20px !important; }，子元素若自己设了 .child { font-size: 14px; }，那 14px 照常生效——!important 不会“传染”给后代声明。

容易被忽略的兼容与构建陷阱

这些坑不报错，但效果消失得悄无声息：

• 旧版 Android WebView（尤其 4.4 及更早）对 !important 解析不稳定，可能直接忽略
• PostCSS 插件（如 autoprefixer 或 cssnano）默认可能剥离 !important，需检查配置中 discardComments 或 reduceIdents 是否误删
• Shadow DOM 场景下，host 外部的 !important 规则对 slot 内容无效，必须用 ::slotted() 或 :host 显式透出

最麻烦的是那些既不能动源码、又不能调加载顺序、还套了多层封装的 UI 组件——这时候 !important 往往是唯一出口，但也意味着你已站在维护悬崖边上。