内联样式优先级最高，因其权值为1000且直接绑定DOM元素；误用场景包括替代reset.css、字符串拼接style、滥用!important；适用场景为动态值、服务端微调、DOM直操作；可被!important（外部）、CSS变量、Shadow DOM例外覆盖。

内联样式优先级最高，是因为它离元素最近、权值最硬

浏览器渲染样式时，并不是“谁写得晚就赢”，而是按一套可量化的权重（specificity）+ 来源层级（source layer）共同决定。其中，style 属性属于「内联样式」，它的权值被 CSS 规范明确定为 1000 —— 这比单个 ID 选择器（100）、类选择器（10）甚至多个组合都高得多。

更关键的是：它不经过选择器匹配过程，直接绑定到该 DOM 元素实例上。相当于对这个

实际开发中，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 才找得到源头。这时候权值高低反而不是重点，路径不可见才是痛点。