内联样式优先级高于外部样式，因其 specificity 权重为1000，远超外部样式选择器最高约112的权重；唯一例外是外部样式使用 !important 且未被更高权重的 !important 覆盖。
内联样式优先级高于外部样式，这是确定无疑的。 不需要查文档、不用加测试用例，只要浏览器还在按 CSS 规范解析，style 属性里的声明就一定压过 <link rel="stylesheet"> 引入的任何规则——除非后者用了 !important 且没被更高权重的 !important 覆盖。
内联样式为什么能赢外部样式？
这不是“谁写得晚谁生效”的简单顺序问题，而是 CSS 权重（specificity）机制决定的：style 属性自带 1000 级权重，而外部样式表里哪怕写 #header .nav li a 这种复杂选择器，累加起来最多也就 100 + 10 + 1 + 1 = 112。1000 > 112，结果早就锁死了。
常见错误现象：
- 改了
styles.css里的.btn { color: blue; }，但按钮还是红色——八成是 HTML 里写了<button style="color: red;"></button> - 用 DevTools 看 computed styles，发现某条属性旁标着 “inline” —— 那就是它赢了
外部样式真的一点机会都没有？
有，但条件很苛刻：必须在外部样式里加 !important，而且不能被更高权重的 !important 反杀。
使用场景：
- 第三方 UI 库强制设了内联样式（比如某些 React 组件库渲染时注入
style），你又无法改源码，只能靠!important硬顶 - 临时覆盖 CMS 输出的内联样式，用于 A/B 测试或灰度发布
注意：!important 在内联样式里也有效——<p style="color: red !important;"></p> 能挡住外部样式里所有 !important，除非外部样式也带 !important 且权重更高（现实中几乎不可能）。
别把“加载顺序”和“优先级”混为一谈
外部样式表后加载，确实可能覆盖先加载的同权重内部样式，但这跟内联样式无关。内联样式不参与“层叠顺序”竞争，它直接跳过那套流程，属于“先占先得”型选手。
容易踩的坑：
- 以为把
<link>放到<style></style>后面就能盖过内联样式——没用 - 调试时只盯着 DevTools 的 “Styles” 面板看外部 CSS 文件，却忽略右上角 “element.style” 区域
- 用 JS 动态设置
el.style.color = 'green'，这等价于内联样式，同样会压过所有外部规则
真正麻烦的从来不是“谁优先级高”，而是有人一边写 style 属性，一边又在外部 CSS 里拼命加 !important 去对抗——这种撕扯会让维护成本指数级上升。优先级只是规则，怎么用才见功力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
