HTML内联style属性需严格遵循小写、起始标签、合法CSS声明等规则，漏分号、错引号、缺单位均致失效，且不支持选择器、伪类和!important；动态操作应避免setAttribute覆盖，优先用el.style.property赋值。
直接在 HTML 标签的 style 属性里写 CSS 声明，就是最有效、最即时的临时样式方式——但它不是“随便粘贴 CSS 就行”，稍有格式或语义错误，浏览器就静默忽略，连报错都没有。
style 属性必须写在开始标签内，且大小写敏感
很多人把 style 写成 Style 或 STYLE，或者塞进结束标签（比如 style="...">），这些全无效。HTML 解析器只认小写的 style，且只接受出现在起始标签中。
- ✅ 正确：
文字
- ❌ 错误：
文字
- ❌ 错误：
文字
style="color: red;">
style 值只能是合法的 CSS 声明列表，不支持选择器或伪类
style 不是“把 CSS 文件内容复制进去”的快捷通道。它只解析形如 property: value; 的声明，中间不能混入任何选择器、@media、:hover 或 !important。
- ✅ 有效：
style="color: blue; font-size: 14px;" - ❌ 无效：
style=".btn { color: blue; }"（含类选择器） - ❌ 无效：
style=":hover { opacity: 0.8; }"（含伪类） - ❌ 无效：
style="color: red !important;"（!important被忽略）
分号、引号、单位一个都不能少
漏分号、空格不当、单位缺失，都会导致整条声明失效——而且浏览器不提示，只是“看起来没生效”。
- ⚠️ 分号是分隔符：
style="color: red margin: 0;"→margin完全不生效（缺分号） - ⚠️ 含空格的值必须引号：
font-family: "Helvetica Neue"→ 必须写成style="font-family: "Helvetica Neue"" - ⚠️ 单位不可省略：
width: 100无效；必须是width: 100%或width: 100px
JavaScript 动态操作 style 时，别用 setAttribute 覆盖整个字符串
用 el.setAttribute('style', '...') 会清掉之前所有通过 el.style.xxx = 设置的样式，极易引发意外覆盖。
- ✅ 推荐单个设置：
el.style.color = 'blue';（驼峰命名，自动转换短横线） - ✅ 批量安全设置：
Object.assign(el.style, { color: 'blue', fontSize: '14px' }); - ❌ 避免覆盖：
el.setAttribute('style', 'color: blue;');→ 原来的padding、border全丢 - ✅ 清除某项：
el.style.color = '';（设为空字符串）
真正难的不是写对一行 style，而是记住它永远无法响应屏幕尺寸变化、无法复用、无法继承主题变量——一旦你开始写第二个相似的 style，就该立刻停下来，把逻辑抽到 class 或 块里。
