内联样式优先级最高，高于任何外部!important；其本质是直接绑定dom元素，不参与选择器权重计算，故外部规则无论是否含!important均无法覆盖。
内联样式优先级天然高于外部!important
加了 !important 还压不住 style 属性，不是你写得不够狠，而是 CSS 规范明确把内联样式放在层叠顺序的顶端——它比任何外部或内部 CSS 中的 !important 都高一级。哪怕你写 .btn { color: red !important; }，只要元素上存在 style="color: blue;"，最终生效的仍是蓝色。
关键点在于：内联样式不靠选择器权重赢，它直接绑定到 DOM 元素，浏览器视其为“最贴近意图”的声明。所以外部规则再带 !important，也只是和“普通外部规则”比权重；而内联样式是另一个层级的选手，根本不进同一场比赛。
DevTools里被划掉的!important，到底输给了谁？
打开 Chrome DevTools → Elements → 选中目标元素，重点看两个地方：
-
Styles面板里被横线划掉的那条规则，悬停会提示specificity is lower than another rule—— 如果旁边标着element.style，说明 JS 或框架刚重写了element.style.color -
Computed面板里点开属性值右侧箭头，看来源是不是inline；如果是，!important再多也无效 - 右键元素 → “View element in console”，运行
getComputedStyle($0).color，结果若为 rgb 值且来源写着inline，就是它
真正能绕过内联样式的几种实操路径
硬拼 !important 不是解法，而是信号：你在和无法修改的 DOM 打交道。可行的替代方式有：
- 用
data-属性接管控制权：JS 改el.dataset.width = "400"，CSS 写[data-width] { width: attr(data-width px) !important; }（注意attr()必须配!important才生效） - 改用 CSS 变量中转：
<div style="--item-width: 400px;"> + <code>.item { width: var(--item-width); }，后续只需改变量值 - 在 JS 层主动清理：比如
el.style.cssText = el.style.cssText.replace(/width[^;]+;/g, '')，删掉干扰项 - React/Vue 中禁用
style={{}}，统一走className+ BEM，例如class="card card--wide"对应.card--wide { max-width: 800px; } - 父容器类名可能被 JS 动态移除或重命名，规则直接失效
- 权重提升不精准：第三方库可能用了
button[disabled].ant-btn这种 (0,2,1) 权重，你套两层父级仍是 (0,3,0)，未必赢 - 真正该做的是用
:where(.my-theme) .ant-btn主动降权再覆盖，确保规则只在主题 class 存在时生效，不干扰其他上下文
第三方库注入的style，为什么加父级选择器也没用？
很多人尝试把 .carousel__item { width: auto !important; } 改成 .owl-carousel .carousel__item { width: auto !important; }，但这解决不了本质问题：
最常被忽略的一点：很多所谓“覆盖不了”的内联样式，其实是框架在 SSR 后几毫秒内、或响应式更新时由 JS 重新写的 element.style，你写的 CSS 刚生效就被覆盖了。
