内联样式优先级最高因其特异性固定为1000且不参与来源顺序竞争，优先级排序为style属性＞＜style＞标签＞外部css；但可用!important在外样中反超，代价是降低可维护性与性能。
内联样式为什么能赢过外部 CSS 文件
因为浏览器渲染时，内联样式具有更高的特异性（specificity）值，且不参与层叠顺序中的“来源顺序”竞争——它直接绑定在元素上，天然比 link 或 @import 引入的外部样式更靠近 DOM 节点。
三种引入方式的优先级实际排序
从高到低依次是：style 属性（内联） > <style></style> 标签（内部） > 外部 CSS（link 或 @import）。注意：这个排序只在选择器权重相同时生效；如果外部文件里用了 !important 或更具体的选择器（比如 #header .nav li a），就可能反超内联样式。
-
style属性没有选择器，所以它的特异性固定为1000 -
<style></style>和外部 CSS 的特异性取决于里面写的选择器，跟引入位置无关 -
@import在<style></style>里使用时，会按规则出现顺序参与层叠，但依然低于内联
用 !important 覆盖内联样式的可行性和代价
技术上可以，但必须满足两个条件：声明在外部 CSS 中、且该声明的选择器能匹配到对应元素。例如：
button { color: red !important; }
这样能覆盖 <button style="color: blue"></button> 里的 color。但代价明显：
立即学习“前端免费学习笔记（深入）”；
- 破坏可维护性——后续想改颜色得去翻外部文件找
!important - 影响性能——浏览器需额外比对带
!important的规则，且无法安全地进行 CSSOM 优化 - IE6–8 对
!important解析有 bug，尤其在组合选择器中容易失效
什么时候真该用内联样式
仅限动态、一次性、无法预知的样式变更场景，比如 JS 控制的拖拽位置、实时主题切换的根字体大小、或服务端渲染时注入的个性化配色。其他情况都该走 CSS 类名 + 外部文件。
- 避免用
element.style.xxx = ...批量操作多个属性，改用element.className切换预设类 - React/Vue 等框架中，
styleprop 应只传计算后的对象，别塞字符串 - 内联样式无法被浏览器缓存，每次 HTML 加载都要重传，对首屏性能有隐性负担
真正难处理的不是优先级本身，而是团队协作时没人记得某处按钮的颜色其实卡死在 style 属性里——查半天 CSS 文件才发现是 HTML 模板里硬写的。
