HTML内联style属性需严格遵循小写、起始标签、合法CSS声明等规则,漏分号、错引号、缺单位均致失效,且不支持选择器、伪类和!important;动态操作应避免setAttribute覆盖,优先用el.style.property赋值。

直接在 HTML 标签的 style 属性里写 CSS 声明,就是最有效、最即时的临时样式方式——但它不是“随便粘贴 CSS 就行”,稍有格式或语义错误,浏览器就静默忽略,连报错都没有。
style 属性必须写在开始标签内,且大小写敏感
很多人把 style 写成 Style 或 STYLE,或者塞进结束标签(比如 style="...">),这些全无效。HTML 解析器只认小写的 style,且只接受出现在起始标签中。
- ✅ 正确:
<p style="color: red;">文字</p> - ❌ 错误:
<p style="color: red;">文字</p>(首字母大写) - ❌ 错误:
<p>文字</p>style="color: red;">(结束标签里加)
style 值只能是合法的 CSS 声明列表,不支持选择器或伪类
style 不是“把 CSS 文件内容复制进去”的快捷通道。它只解析形如 property: value; 的声明,中间不能混入任何选择器、@media、:hover 或 !important。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
- ✅ 有效:
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 或 <style></style> 块里。

















