行内样式优先级高于任何外部CSS的!important声明，因其直接绑定元素且处于层叠顺序最高层。常见于框架动态注入style、DevTools中element.style被划掉、第三方组件覆盖等情况，需用className、@layer或JS操作style替代硬加!important。
根本原因：行内样式（style 属性）的优先级天然高于任何外部或内部 CSS 中的 !important 声明。 即使你写了 .btn { color: blue !important; }，只要元素上存在 style="color: red;"，最终生效的仍是红色 —— 这不是 bug，是 CSS 规范明确规定的层叠顺序。
行内样式为什么能压过 !important
CSS 层叠优先级从低到高是：普通外部样式 ＜ 带 !important 的外部样式 ＜ 行内样式（） ＜ 带 !important 的行内样式。注意：行内样式本身不依赖选择器权重，它直接绑定到元素，浏览器视其为“最贴近意图”的声明，所以连 !important 都无法在外部 CSS 中反向压制它。
常见错误现象：
- DevTools 里看到自己的规则被划掉，来源显示
element.style - 加了
!important后仍无效，但删掉元素上的style属性就立刻生效 - 第三方组件（如 Element Plus、Ant Design）动态注入的
style属性，导致你写的覆盖规则完全失效
哪些场景下 !important 确实没用
不是 !important 写得不够狠，而是它根本不在同一竞争层级：
立即学习“前端免费学习笔记（深入）”；
<div style="background: #f00;"> vs <code>div { background: #00f !important; }→ 红色胜出-
<button style="color: inherit !important;"></button>vs 任意外部!important→ 继承值胜出（因为这是带!important的行内样式） - React/Vue 组件中通过
style={{}}或:style动态绑定的样式，本质仍是行内样式，外部 CSS 无法靠!important覆盖 - 用
className或data-属性标记元素，再用高特异性选择器 +!important（仅限必要时），例如：[data-override="theme"] .el-input__inner { border-color: #1890ff !important; } - 改用
@layer显式声明样式层级（Chrome 100+ 支持），把业务样式层放在 UI 库层之后：@layer components { .my-card { background: white; } } - 在 JS 中主动移除或重写
element.style.cssText，比如el.style.cssText = el.style.cssText.replace(/background[^;]+;/g, '') - 对 React 组件，优先用
className配合 CSS Modules 或 Tailwind，避免styleprop 直接干预
真正有效的替代方案（不硬刚 style）
与其反复加 !important，不如绕开行内样式的控制权：
容易被忽略的关键点
很多人查了半天发现是缓存或拼写错误，但真正卡住的往往是：行内样式可能来自 JS 框架的运行时逻辑（比如 Vue 的 v-bind:style、React 的 style prop、或 UI 库的自动适配逻辑），它不会出现在原始 HTML 里，而是在 DOM 渲染后才写入 style 属性 —— 所以光看源码找不到，必须在 DevTools 的 Elements 面板里实时检查 element.style 那一栏。
