行内样式优先级最高，因其权值固定为1000，远超id选择器（100）、类选择器（10）等；它作为元素自身属性不参与选择器匹配，天然高于外部css规则，且!important也无法覆盖，除非同样加在style属性中。
行内样式为什么总能覆盖内部和外部样式
因为浏览器解析CSS时，行内样式被直接绑定在元素的style属性上，属于“最靠近元素”的声明源，无需选择器匹配，也不受层叠顺序（如加载先后）影响。它天然具有最高特异性（specificity值为1000），而内部样式和外部样式的特异性最多到0-1-0（类选择器）或0-0-1（标签选择器），根本无法与之竞争。
常见错误现象：color或display等属性明明在<style></style>里写了，但页面没生效；检查发现目标元素上带了style="color: red"——这就是行内样式在“劫持”控制权。
- 即使外部样式用
!important，也只对同级声明有效；而行内样式本身不支持写!important语法（HTML规范不允许），但它的权重已默认高于所有普通规则 - Vue/React等框架生成的
style属性（如v-bind:style或style={{}}）本质也是行内样式，同样适用该优先级 - 服务端渲染或JS动态插入的
element.style.color = 'blue'会直接写入DOM的style属性，效果等同于手写的行内样式
内部样式和外部样式谁优先？关键看<link>和<style></style>的顺序
内部样式和外部样式没有固有高低之分，它们的特异性相同（均为0-0-0，除非用了类/ID选择器），最终谁生效取决于在HTML中出现的**物理顺序**：后定义的覆盖先定义的。
使用场景：你引入了一个UI框架的reset.css，又在底部加了自定义<style></style>，此时自定义样式能覆盖框架样式——不是因为它“内部”，而是因为它写在后面。
-
<link rel="stylesheet" href="a.css">必须放在<style></style>之前，才能被其覆盖；反之则a.css里的规则可能生效 - 多个
<link>之间也遵循此规则：后加载的CSS文件中的同名规则会覆盖前面的 - 注意：CSS文件内的
@import是异步加载，其规则实际插入位置不可控，容易打破预期顺序，应避免在生产环境使用
!important能绕过所有优先级规则吗
不能。它只作用于单条声明，且无法提升来源层级——行内样式本身不支持写!important，但它的权重已经固定为1000；而你在<style></style>里写p { color: red !important; }，依然会被<p style="color: blue"></p>覆盖。
真实错误现象：开发者以为加了!important就能“强制生效”，结果发现按钮颜色还是不对——大概率是按钮HTML里自带style属性，或者JS运行时注入了行内样式。
-
!important仅在同类型声明间起作用：比如两个外部样式冲突时可用，但它无法让外部样式压倒行内样式 - 现代框架（如Angular的
ViewEncapsulation、Vue的scoped）会自动添加属性选择器来提高特异性，但这仍低于行内样式的1000权重 - 调试时可右键检查元素，在浏览器开发者工具的Styles面板中，被划掉的样式即表示被更高优先级规则覆盖，注意观察哪条带
inline标记
什么时候该用哪种引入方式
优先级不是设计依据，而是冲突发生后的兜底规则。真正该考虑的是可维护性与协作成本。
行内样式只应在明确需要“单次覆盖”时使用，比如CMS后台编辑器实时预览、A/B测试分支样式、或服务端根据用户角色动态注入的style属性；滥用它会让CSS越来越难调试。
- 内部样式（
<style></style>）适合纯静态单页应用、邮件模板（部分客户端只认内部样式）、或需要规避外链请求的离线场景 - 外部样式（
<link>）是绝大多数项目的唯一合理选择：支持缓存、复用、压缩、tree-shaking，且团队成员可独立维护CSS文件而不碰HTML - 如果发现不得不靠调整引入顺序或狂加
!important来解决样式覆盖问题，说明结构设计已出问题——该拆组件、加BEM命名，而不是赌优先级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
