!important无法覆盖内联样式，因其不参与同一层叠层级比较；内联样式权重固定为(1,0,0,0)，优先级恒高于任何外部规则（含!important），唯一解法是绕开覆盖，改用CSS变量、data属性或class管理。
它不会覆盖内联样式——这是最常见的误解。实际上，!important 本身无法让外部 CSS 规则“赢过”内联样式；真正能覆盖的，是带 !important 的外部规则在层叠顺序中被提升到了比普通内联样式更高的层级，但前提是：内联样式自己没带 !important。
为什么 DevTools 里看到 .btn { color: blue !important; } 被划掉了？
那不是权重输了，而是它压根没机会参与比较——浏览器先处理所有内联样式（style 属性），再处理所有带 !important 的外部声明，最后才处理普通外部规则。所以当元素有 style="color: red;"，而你的规则是 .btn { color: blue !important; }，它会被执行，但**在层叠阶段排在内联样式之后**，于是被覆盖。
- 划掉 ≠ 权重低，而是来源层级更低：来源顺序为
user agentauthor normal author !important inline inline !important -
element.style在 DevTools 的 Computed 面板里显示为inline，说明它走的是“内联样式”通道，不进选择器权重计算 - 运行
getComputedStyle(el).color返回的值，如果来自style属性，就证明它已胜出
什么时候 !important 真的能压倒 style 属性？
只有当内联样式自己也带 !important（如 style="color: red !important;"）时，两个 !important 声明才会回到权重 + 源顺序的老路比拼。但这种情况极少见，且多数现代浏览器会忽略 style 属性里的 !important（语法非法）。
- 合法生效的组合只有一种：
.my-btn { color: blue !important; }对标<button style="color: red;">→ 蓝色生效 - 非法/不可靠的组合：
<button style="color: red !important;">→ 大部分浏览器直接忽略!important，按普通内联样式处理 - 若第三方库（如 Swiper）动态写入
el.style.transform = "translateX(100px)"，这等价于style="transform: translateX(100px);"，仍属 1000 权重，外部!important无效
为什么加 10 个类名、套 :is() 或用 [style] 伪类都没用？
因为它们全在选择器权重体系里打转，而内联样式根本不在这个体系里。权重是四元组 (a,b,c,d)，内联样式固定占位 a=1，外部规则 a 永远是 0 —— 比较从左到右，1 > 0 直接终止。
立即学习“前端免费学习笔记（深入）”；
-
#app .container .item.active[data-state="open"]::before权重是(0,1,4,2)，输给style="color:red"的(1,0,0,0) -
:is(.a, #b) .c权重等于#b .c，不是叠加，更不会触发a=1 -
[style]伪类权重仅10，且它只匹配有没有style属性，不读取属性值，无法用于覆盖
真正该做的，不是加 !important，而是绕开 style
硬刚内联样式是逆向工程，成本高、易失效。更可持续的做法是让样式控制权回归 CSS 层。
- 用
data-属性替代动态style：JS 改el.dataset.width = "400"，CSS 写[data-width] { width: attr(data-width px) !important; } - 用 CSS 变量中转：
<div style="--bg: #ff6b6b;">+.card { background-color: var(--bg); } - 在 React/Vue 中禁用
style={{}}，改用语义化 class：class="card card--highlighted"，配合 BEM 或原子类 - 对第三方组件，优先查文档是否支持
className/theme/injected styles配置项，而不是一上来就!important
最常被忽略的一点：很多你以为“被内联样式挡住”的 CSS，其实是 JS 框架在 useEffect 或 mounted 里几毫秒后又重写了 element.style。不打断 JS 执行流，光改 CSS 就是刻舟求剑。
