内联样式必须写在style属性中，仅对视觉元素生效，特异性为1000，优先级最高；不支持伪类、伪元素、@media及!important；语法须用短横线、分号分隔、带空格值加引号、单位不可省。
内联样式能直接控制单个元素的外观，但必须写在 style 属性里，其他地方无效；它优先级最高，但不能写伪类、不能响应式、也不能用 !important 提升——因为已经是最高的了。
style 属性值怎么写才合法
浏览器只认 style 这个属性名，拼错（比如 stytle 或 css）就完全不生效。它的值是 CSS 声明列表，不是 JSON，也不是 JS 对象：
- 每条声明用英文冒号分隔属性和值，例如
color: red，不是color = red - 多条声明之间用英文分号分隔，末尾分号可省但建议保留，避免加新样式时出错
- 属性名必须用短横线格式，如
background-color、font-family，不能写成backgroundColor - 值中含空格（如字体名
Courier New）必须加引号，推荐统一用单引号：font-family: 'Courier New'
哪些 CSS 属性能在 style 里用
绝大多数标准 CSS 属性都支持，但有两个硬限制：
-
:hover、::before等伪类和伪元素无法通过style设置——它们只能出现在<style></style>标签或外部 CSS 文件里 -
@media查询完全不支持，所以无法在style属性里做响应式断点 -
--my-color这类 CSS 变量可以定义和使用，但 IE 不支持，需确认目标环境 - 旧版 Safari 的
-webkit-transform等前缀属性理论上可用，不过现代浏览器基本已不需要手动加
内联样式和其他 CSS 规则冲突时谁赢
内联样式的特异性固定为 1000，高于任何 class（10）、ID（100）甚至带 !important 的外部规则。这意味着：
- 即使外部 CSS 写了
.btn { color: blue !important; }，只要元素有style="color: red;"，最终显示红色 - 想覆盖内联样式，唯一可靠方式是用 JS 修改
element.style.color，或者用 JS 动态重写整个style属性值 - React/Vue 中传入的
{ color: 'red' }对象会被框架转为内联样式，同样遵循这个优先级规则
什么时候不该用 style 属性
看似方便，但容易埋坑：
- 十几个按钮都写
style="margin: 4px; border-radius: 2px;"？该抽成 class - 需要根据屏幕尺寸调整 padding？
style里写不了@media，得换方案 - 主题切换要改几十个
style值？维护成本爆炸，CSS 变量 + 外部类才是正解 - 调试时临时加一两条没问题，但上线代码里大量出现，说明样式组织逻辑可能已经失衡
真正难的不是写对 style="..."，而是判断“这到底该不该用内联样式”——多数时候，答案是否定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
