行内样式优先级最高，因其权值固定为1000，远超ID选择器（100）、类选择器（10）等；它作为元素自身属性不参与选择器匹配，天然高于外部CSS规则，且!important也无法覆盖，除非同样加在style属性中。
行内样式优先级最高，是因为它的权值固定为 1000 —— 远超 ID 选择器（100）、类选择器（10）甚至一长串组合选择器（如 #header .nav li a:hover 权值才 112）。这不是浏览器“偏心”，而是 CSS 规范明确规定的计算逻辑，目的很实际：给开发者一个**确定、不可绕过**的最终控制手段。
为什么 style 属性能直接压倒所有外部 CSS？
CSS 优先级本质是“权值累加”而非“谁写在后面谁赢”。行内样式不参与选择器匹配，它属于元素自身的属性，浏览器把它当作“直接样式”处理，天然高于任何通过选择器“找过来”的规则。
- 即使你写了
!important的外部规则，也无法覆盖行内样式 —— 除非你也把!important加在style属性里（如style="color: red !important;"），但这极不推荐 - ID 选择器再强，权值也只是 100；10 个类加起来才 100，仍不够 1000
- 框架（Vue/React）中用
:style="{ color: textColor }"或style={{ color: textColor }}，也会生成等效的行内样式，同样触发 1000 权值
如何快速定位是不是行内样式在搞鬼？
打开浏览器开发者工具（F12），选中目标元素，在 Styles 面板顶部找 element.style —— 它永远排第一，带小箭头可展开。如果这里定义了你要覆盖的属性（比如 color），那基本就是它在拦截。
- 点击
element.style左侧复选框临时禁用它，样式若立刻恢复正常，就坐实了问题来源 - 接着切到 Elements 面板，看 HTML 中是否手写了
style="..." - 如果是 JS 动态注入的，检查
el.style.color = "red"这类直接赋值语句；如果是框架渲染，查v-bind:style或style={...}绑定源
不想被行内样式卡住？替代方案要这么用
硬刚行内样式（比如靠 !important + 更高权值选择器）是徒劳且危险的。正确做法是**从源头接管控制权**：
立即学习“前端免费学习笔记（深入）”；
- 用 class 切换代替直接操作
style：改el.style.color = "red"为el.classList.add("error-text")，然后在 CSS 里定义.error-text { color: red; } - 用 CSS 自定义属性（变量）统一管理动态值：在
:root定义--text-color: red;，再用color: var(--text-color);，JS 只需改document.documentElement.style.setProperty('--text-color', 'blue') - 若必须保留行内样式（如 Canvas 导出 SVG 的 fill），可用
[style]属性选择器做兜底覆盖：button[style] { background: #007bff !important; }—— 但这是最后手段
真正难的不是算清 1000 > 100，而是意识到：一旦行内样式出现在生产环境，往往意味着样式逻辑已失控——它可能来自三方库、旧代码、甚至构建工具自动注入。盯住 element.style，比背权值表更能救火。
