内联样式无法被外部css覆盖，因其权重固定为(1,0,0,0)，不参与外部选择器的specificity计算；浏览器视其为“最终指令”，优先级恒高于任何外部规则（含!important），唯一解法是绕开覆盖、改用css变量、class管理或禁用动态内联。
内联样式无法被外部 CSS 文件覆盖，不是你选择器写得不够狠，而是它压根不参与外部规则的权重比拼——浏览器把它当作“最终指令”，直接跳过 specificity 计算环节。
内联样式根本不进 CSS 权重赛道
内联样式（style 属性）在 CSS 规范中被赋予固定权值 (1,0,0,0)，而所有外部选择器（哪怕写成 #app .modal > div[data-state="open"]::before）最高只能到 (0,1,4,2)。比较时从左到右，第一位 1 > 0 直接判负，后面堆再多类名、属性、伪类都无效。
- DevTools 的 Styles 面板里显示
element.style并带小箭头可展开 → 就是它在作祟 -
getComputedStyle(el).color返回的值若和el.style.color一致，说明没被覆盖 - Vue 的
:style="{ color }、React 的style={{ color }}都会生成真实style属性，不是“模拟”
为什么加 !important 还是没用
!important 只能提升外部规则的声明级优先级，但它无法让外部规则“跃迁”到内联样式所在的层级。只要元素有 style 属性，浏览器就认定这是 DOM 层面的最终指令。
- 第三方轮播库（如 Owl Carousel）初始化后自动写
style="width: 400px;"，你写的 CSS 在 DOM 加载完就已“过期” - SSR 渲染后 JS 再次 patch 样式，
element.style是第二次写入的结果，调试时看到的不是你写的那一版 -
!important在外部 CSS 中的权值仍低于内联样式，它只在“同来源类型”中起作用（比如外部 vs 外部）
真正能绕开的实操路径
硬拼权重或狂加 !important 是信号：你在对抗不可控的 DOM 状态。可行解法必须绕开“覆盖”这个动作本身。
- 用 CSS 变量接管：
<style>:root { --bg-color: blue; }</style>，内联写成style="background: var(--bg-color);"，后续只改变量值 - 删掉干扰项：检查框架组件源码，禁用
:style或style={}绑定，统一走className+ BEM 类名（如btn btn--primary） - 动态控制 class：JS 不写
el.style.background = "red"，改用el.classList.toggle("is-active")，样式全由 CSS 类管理 - 对第三方库注入的
style，优先查文档看是否提供disableInlineStyles选项（如 Ant Design 的css-in-js模式可关）
最常被跳过的一步：别急着写新 CSS。先打开 DevTools，临时禁用 element.style 左侧复选框，如果样式立刻恢复正常，就确认是它导致的覆盖——再结合 Elements 面板定位来源，是手写 HTML、JS 注入，还是框架响应式渲染产生的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
