内联样式优先级最高，因其权值为1000且直接绑定DOM元素；误用场景包括替代reset.css、字符串拼接style、滥用!important；适用场景为动态值、服务端微调、DOM直操作；可被!important（外部）、CSS变量、Shadow DOM例外覆盖。
内联样式优先级最高，是因为它离元素最近、权值最硬
浏览器渲染样式时，并不是“谁写得晚就赢”，而是按一套可量化的权重（specificity）+ 来源层级（source layer）共同决定。其中，style 属性属于「内联样式」，它的权值被 CSS 规范明确定为 1000 —— 这比单个 ID 选择器（100）、类选择器（10）甚至多个组合都高得多。
更关键的是：它不经过选择器匹配过程，直接绑定到该 DOM 元素实例上。相当于对这个 说：“你只能是红色，别问为什么”。其他样式（哪怕写在 里用 #main p 精准命中）都得先“猜中你是谁”，再“申请覆盖”，而内联样式已经“持证上岗”。
实际开发中，style 属性常被误用的三个场景
- 用
style="margin: 0; padding: 0;"替代reset.css—— 导致大量重复代码，且无法响应式调整 - 在 Vue/React 中频繁拼接字符串写
style，比如:style="'color: ' + color + '; font-size: ' + size + 'px'"—— 易出错、难调试、无类型提示 - 为绕过某个 class 样式，强行加
style="display: block !important;"——!important在内联里虽有效，但等于主动放弃样式层叠逻辑，后续维护成本陡增
什么时候该用 style 属性？看这三点
它不是“坏东西”，而是有明确职责边界的工具：
- 动态计算值必须实时反映到样式上，例如拖拽时的
transform: translateX(127px)或进度条的width: 65% - 服务端渲染或 CMS 输出中，需为单个组件注入不可复用的视觉微调（如某篇文章封面图的
object-fit: cover） - JavaScript 框架中通过 ref 直接操作 DOM 样式，且该样式不会被任何 CSS 类接管（比如 canvas 容器的
height/width）
style 属性真不能被覆盖？小心这些例外
很多人以为“内联样式无敌”，其实有两条路能翻盘：
立即学习“前端免费学习笔记（深入）”；
-
!important在外部或内部样式表中声明，且作用于同一属性 —— 例如外部文件写了p { color: blue !important; }，而 HTML 是，最终仍是蓝色（前提是内联没也加!important） - CSS 自定义属性（
--main-color）配合var()，把内联样式变成变量载体，真正生效的规则在别处 —— 这种方式让style只管传参，不管样式逻辑 - Shadow DOM 中的样式隔离机制，会让内联样式只在 light DOM 生效，完全影响不到 shadow root 内部元素
真正难处理的，从来不是“哪个优先级高”，而是当 style 和 class 同时改同一个属性（比如 opacity），又没统一管控时，调试起来要翻三遍 DevTools 才找得到源头。这时候权值高低反而不是重点，路径不可见才是痛点。
