仅在两类真实不可绕过情况下可用!important：覆盖第三方内联样式或可访问性兜底。前者因内联样式权重最高，后者限于color、font-size等可读性属性并须用@media或@supports包裹，其余情况均属结构问题。
只在两类真实不可绕过的情况下才该用 !important：覆盖无法修改的第三方内联样式（如 CMS 输出的 style="color:red"），或为可访问性强制兜底（如用户浏览器插件注入的字体放大规则）。
覆盖第三方内联 style 属性时必须用
内联样式天然权重高于任何外部 CSS 选择器，!important 是唯一能压过它的手段。比如 CMS 导出的按钮：<button style="padding: 4px"></button>，你写 .btn { padding: 12px } 完全无效。
- 必须确认目标是真实内联 style，不是 class 或 data-* 属性模拟的“伪内联”
- 优先检查是否可通过 JS 移除原
style属性，比加!important更干净 - 若必须用，注释里得写明来源，例如：
/* overrides Shopify product-card inline padding */
可访问性兜底场景下允许用
某些浏览器插件（如 ZoomText、Windows 高对比度模式）会注入带 !important 的用户样式。如果你的组件在这些环境下文字不可读，就得用同等强度对抗——否则用户根本看不见。
- 仅限
color、background-color、font-size等直接影响可读性的属性 - 禁止用于布局类属性（
display、flex、position），会破坏语义结构 - 必须搭配
@media (forced-colors: active)或@supports (-ms-high-contrast: active)条件包裹
其他所有“看起来非用不可”的情况，其实都是结构问题
比如你发现 .header-nav a 被 #app .nav-link 覆盖了，第一反应不该是加 !important，而是：
- 把选择器改成
.header-nav .nav-link，靠特异性自然胜出 - 确认自定义 CSS 文件是否在第三方库之后加载（源顺序决定层叠）
- 用
@layer utilities显式声明层级，比硬拼权重更可控 - 检查是否有
scoped或 Shadow DOM 阻断了样式穿透，该用:deep()就别碰!important
最常被忽略的一点：!important 不是修复工具，是债务凭证。每次使用，都意味着你主动放弃了对层叠路径的控制权——而线上环境里，失控比不生效更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
