内联样式不参与css选择器权重计算，优先级固定为1000，高于任何外部规则（含!important）；其本质是浏览器视为“直接指令”，故外部样式无论多具体或带!important均无法覆盖。
内联样式根本不在CSS选择器权重体系里
外链样式表写得再具体、加再多 !important，也赢不了内联样式——不是你权重不够，而是它压根不参与权重计算。浏览器把 style 属性视作“直接指令”，优先级固定为 1000，而 #header .nav a:hover 这种高权重选择器算下来也就 112。两者不在同一赛道比拼。
常见错误现象：
-
button { background: blue !important; }在 DevTools 中被划掉，悬停提示 “specificity is lower than another rule”，来源标着element.style - Computed 面板里属性值右侧箭头点开，显示来源是
inline - 运行
getComputedStyle($0).backgroundColor返回的 rgb 值，且cssText显示含style="background: red;"
为什么加了 !important 还是没用？
因为 !important 只能提升 CSS 规则的声明级优先级，但它无法让外部规则“跃迁”到内联样式所在的层级。只有当内联样式自己也带 !important（极少见），或你用 JS 动态改 element.style.backgroundColor，才可能触发更复杂的比较逻辑；绝大多数情况下，普通内联样式就是最终答案。
使用场景中容易忽略的细节：
- Vue 的
:style="{ background: bg }"、React 的style={{ background: bg }}都会生成真实内联样式，不是“模拟” - 第三方轮播库（如 Owl Carousel）在初始化后自动写
style="width: 400px;"，你写的 CSS 在 DOM 加载完就已“过期” - SSR 渲染后 JS 再次 patch 样式，导致你调试时看到的
element.style是第二次写入的结果
真正能绕过的实操路径，不是堆选择器
硬拼权重或狂加 !important 是信号，说明你在对抗不可控的 DOM 状态。可行解法必须绕开“覆盖”这个动作本身：
- 用 CSS 变量接管：在
<style></style>里定义:root { --bg-color: blue; }，内联写成style="background: var(--bg-color);"，后续只改变量值 - 删掉干扰项：检查 HTML 源码或框架组件源，禁用
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 Styles 面板里点击 element.style 左侧复选框临时禁用它——如果样式立刻恢复正常，就坐实是它的问题；再切到 Sources 或 Elements 面板，搜 style=、.style.、setAttribute('style'，定位到底是手写 HTML、框架响应、还是某段 JS 在几毫秒后偷偷重写了它。很多“覆盖失败”本质是时间差问题，不是优先级问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
