HTML内联样式唯一合法写法是元素起始标签中style全小写属性，值为分号结尾的CSS声明列表；不支持选择器、伪类、媒体查询、!important及中文标点，语法错误会静默丢弃整条声明。
直接写 style 属性不是“粘贴 CSS 就完事”，漏一个分号、错一个引号、用错大小写，浏览器就静默丢弃——连控制台警告都没有。
style 属性必须写在起始标签里，且全小写
HTML 解析器只认 style 这个名字，Style、STYLE、styLe 全部无效；它也只接受出现在开始标签中，比如 <div style="...">，写在 </div style="..."> 或单独一行都是白写。
-
<p style="color: red;">文字</p>✅ -
<p Style="color: red;">文字</p>❌（首字母大写） -
<p>文字</p style="color: red;">❌（结束标签里加） -
<html style="font-family: sans-serif;">❌（<html>不渲染视觉内容，设了也不生效）
style 值必须是合法的 CSS 声明列表，不能混选择器或伪类
style 不是 CSS 文件的快捷入口，它只解析形如 property: value; 的单条声明。任何超出这个格式的内容都会导致整条 style 字符串被忽略。
-
style="color: blue; font-size: 14px;"✅ -
style=".btn { color: blue; }"❌（含类选择器） -
style=":hover { opacity: 0.8; }"❌（伪类不支持） -
style="color: red !important;"❌（!important被静默忽略） -
style="@media (max-width: 600px) { font-size: 12px; }"❌（媒体查询不解析）
分号、引号、单位缺一不可，错一个就整条失效
浏览器对 style 值做字符串级解析，语法错一点，后面所有声明都归零——而且不报错，只“看起来没效果”。
立即学习“前端免费学习笔记（深入）”；
- 漏分号：
style="color: red margin: 0;"→margin完全不生效 - 值含空格不加引号：
style="font-family: Helvetica Neue;"→ 只解析出Helvetica，其余丢弃 - 单位缺失：
style="width: 100;"→ 无效，必须是width: 100px;或width: 100%; - 中文标点：
style="color：red；"（全角冒号/分号）→ 整条失效
JavaScript 动态操作 style 时，别用 setAttribute 覆盖整个字符串
el.setAttribute('style', '...') 会清掉之前所有通过 el.style.xxx = 设置的样式，极易引发意外丢失。
-
el.style.color = 'blue'; el.style.padding = '8px';✅（安全累积） -
Object.assign(el.style, { color: 'blue', fontSize: '14px' });✅（批量赋值推荐） -
el.setAttribute('style', 'color: red;');❌（清空 padding、border 等已有内联样式） -
el.style.color = '';✅（清除某一项，设为空字符串即可） -
el.style.cssText = '...';⚠️（可整体重置，但也会覆盖全部，慎用）
真正难的不是拼对一行 style，而是记住它永远无法响应变化——没有媒体查询、没有伪类、没有继承控制，写了就是死值。一旦需要条件逻辑或复用，就得切回 class + CSS 规则，否则很快陷入样式维护泥潭。
