行内样式能覆盖外部css，因其权值固定为1000（即四元组1,0,0,0），远超id选择器（100）、类组合（如0,1,2,1=121）等外部规则；逐位比较时a位直接胜出，后续位无效。
行内样式能覆盖外部 CSS，不是因为“写得更近”或“浏览器偏心”，而是 CSS 规范里明确定义的权值（specificity）规则：它的权值固定为 1000，而绝大多数外部规则——哪怕用 #app .container > ul li.active:hover 这种长选择器——权值也卡在 112 左右，根本够不到 1000。
行内样式的权值为什么是 1000？
这不是估算，是 CSS 标准硬编码的四元组 (a,b,c,d) 计算结果：
-
a表示行内样式是否存在 → 存在即为1，其余全为0，所以最终是(1,0,0,0) -
b是 ID 选择器数量（如#header），最多贡献100 -
c是类/属性/伪类数量（如.btn[data-loading]），最多贡献10每个 -
d是标签/伪元素数量（如div::before），最多贡献1每个
逐位比较时，a 位直接碾压，后面三位再高也没用。所以 style="color: red" 天然高于 #user-list .item:nth-child(odd) —— 后者权值只是 (0,1,2,1)，换算成可比数字是 121。
为什么 !important 也压不住行内样式？
!important 不改变权值，它只在「同一条声明」内部起豁免作用。比如：
/* 外部 CSS */
.text { color: blue !important; } /* 权值仍是 (0,0,1,0)，只是这条声明被标记为“强制生效” */
<p>/<em> 但行内样式本身不参与选择器匹配，它属于元素固有属性 </em>/
</p><p style="color: red">...</p>
此时浏览器的处理逻辑是：先按权值决定哪条规则“赢”，再看赢的那条里有没有 !important。行内样式权值 1000 已胜出，!important 根本没机会进场。唯一能覆盖它的 !important，必须也出现在 style 属性里：style="color: red !important;" —— 但这等于自己打自己，毫无工程意义。
框架里用 :style 或 style={{}} 也算行内样式吗？
算，而且完全等效。Vue 的 :style="{ color: textColor }"、React 的 style={{ color: textColor }}，运行时都会被渲染成真实的 style="color: #333;" 属性，权值同样是 1000。你看到 DevTools 里 element.style 面板展开后有值，就说明它已介入权值计算链。
- 这类绑定常用于主题色切换、尺寸动态计算等场景，合理但需警惕副作用
- 一旦和外部 CSS 类（如
.card）定义了冲突属性（如都设background），外部规则必然失效 - 调试时优先检查 DevTools 的
element.style区域，而不是翻 CSS 文件找谁写在后面
怎么避免被行内样式意外覆盖？
真正难的不是算权值，而是识别“谁悄悄加了行内样式”。常见来源包括：
- 三方 UI 库（如某些旧版 Ant Design 组件会直接操作
el.style） - Canvas 导出 SVG 时自动注入的
fill/stroke属性 - 构建工具（如某些 PostCSS 插件）在优化阶段内联关键样式
- 手写的
el.style.marginTop = '10px'且未清理
应对策略不是堆选择器或狂加 !important，而是接管源头：
- 用 class 切换代替直接赋值：
el.classList.toggle('is-collapsed')，然后在 CSS 里定义.is-collapsed { height: 0; } - 用 CSS 自定义属性统一控制动态值：
document.documentElement.style.setProperty('--primary-color', '#007bff')，再在 CSS 中写button { background: var(--primary-color); } - 若必须保留行内样式（如 SVG 图标），可用属性选择器兜底：
svg[style] { display: block !important; }—— 但这是最后手段，别养成习惯
行内样式不是 bug，是规范赋予的终极控制权；但它一旦在生产环境泛滥，往往意味着样式逻辑已经脱离 CSS 管理体系，该回溯 JS 层或构建流程了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
