内联样式优先级高是因为其权重为1000，远超任何CSS选择器，浏览器直接硬编码应用；覆盖它必须用带!important的外部样式且选择器能命中元素。
内联样式优先级为什么高到离谱
因为 CSS 优先级规则里，内联样式（style 属性）的权重是 1000，比任何选择器（哪怕 #id.class:hover 加起来才 120）都高。浏览器渲染时直接跳过计算，硬编码应用——不是“赢了”，是“不参与比赛”。
所以光靠写更长的选择器、加 !important 到外部样式表里，根本没用；必须让 !important 出现在内联样式同级或更高作用域，且被浏览器实际读取。
用 !important 覆盖内联样式的唯一有效写法
必须满足两个条件：声明在外部样式中 + 显式带 !important + 选择器能命中该元素。浏览器会把带 !important 的外部声明，和内联样式放在一起比权重，此时 !important 自身权重翻倍，压倒内联。
-
element { color: red !important; }✅ 有效（前提是element能选中那个带内联样式的 DOM） -
[style] { color: red !important; }✅ 可批量覆盖所有含style属性的元素，但可能误伤 -
.my-btn[style*="color"] { color: blue !important; }✅ 利用属性选择器做粗略匹配，适合可控场景 - 只写
color: red;不加!important❌ 白写 - 在 JS 里用
el.style.color = 'red';❌ 这又是一条新的内联样式，和原来的并存，甚至可能互相覆盖，不可控
React/Vue 等框架里别硬刚内联样式
框架组件常通过 style prop 动态注入内联样式（比如 <Button style={{ opacity: loading ? 0.5 : 1 }} />），这时你在外层 CSS 里写 !important 很容易失效——因为框架可能在重渲染时反复重写 style 属性，覆盖你的外部声明。
立即学习“前端免费学习笔记（深入）”；
- 优先改用
className+ CSS 类控制状态，比如<Button className={loading ? 'btn--loading' : ''} /> - 真要覆盖，用
data-属性配合属性选择器：Button[data-loading="true"] { opacity: 0.5 !important; }，再由 JS 控制data-loading - 避免在
useEffect或mounted里手动改el.style，这等于自己造内联样式，制造死循环
Chrome DevTools 里怎么确认是否生效
打开 Elements 面板，找到目标元素，看 Styles 标签页右侧是否出现带小箭头的 color: red !important 条目，并且左侧勾选状态为激活（没被划掉）。如果被划掉，说明有更高优先级的 !important 声明存在，或者选择器根本没匹配上。
- 检查「Computed」标签页，直接搜属性名（如
color），看最终值来源是哪一行 CSS - 注意：某些 UI 库（如 Ant Design）用 CSS-in-JS，生成的类名带哈希，
!important可能被封装在 scoped 样式里，外部 CSS 无法穿透 - 如果用了 Shadow DOM，外部样式默认不进入，
!important再强也进不去，得用::part()或:host等影子上下文选择器
!important，实际是和框架、渲染时机、DOM 结构、甚至 Shadow DOM 边界在博弈。最容易被忽略的，是以为写了 !important 就万事大吉，却没验证它是否真的进入了最终计算样式链。 
