style属性只接受“属性: 值;”格式的合法css声明，含选择器、伪类、媒体查询或!important均无效；必须用短横线命名、分号结尾、引号包裹含空格的值，js操作推荐el.style.prop而非setattribute。

style 属性不是“把 CSS 粘贴进去”的快捷通道，它只认「属性: 值;」这种严格格式的声明列表。写错格式、混入选择器或漏分号，样式就静默失效——浏览器不报错，但也不渲染。

style 属性里哪些 CSS 写法根本无效

浏览器解析 style 时完全跳过非法语法，整条声明会被丢弃：

• style=".btn { color: red; }" —— 含类选择器，无效
• style=":hover { opacity: 0.8; }" —— 含伪类，无效
• style="@media (max-width: 600px) { font-size: 14px; }" —— 含媒体查询，无效
• style="color: red !important;" —— !important 被忽略（style 本身权重已是 1000）

合法写法必须满足这四点

哪怕只设一个颜色，也得守规矩：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 属性名用短横线分隔：font-size ✅，fontSize ❌
• 每个声明以分号结尾：color: red; margin: 0; ✅，color: red margin: 0; ❌（中间缺分号，margin 不生效）
• 值含空格或特殊字符时加引号：font-family: 'Times New Roman'; ✅，font-family: Times New Roman; ❌（解析为 Times）
• 避免值中出现分号：如 URL 含 ? 或 &，别硬塞进 style，改用 JS 动态设置或外部 CSS

用 JavaScript 改 style 时最常踩的坑

直接覆盖整个 style 字符串，等于主动清掉其他脚本设的样式：

• el.setAttribute('style', 'color: blue;') → 原来的 padding、border 全没了
• el.style.color = 'blue' → 安全，只动 color 字段
• 批量设置推荐：Object.assign(el.style, { color: 'blue', fontSize: '14px' })
• 清除某项：设为空字符串，el.style.color = '' ✅，delete el.style.color ❌（无效）

什么时候该用 inline style，什么时候不该

它适合临时调试、服务端渲染首屏关键样式、或框架里由状态驱动的原子级样式（比如 transform: translateX(120px)）。但凡涉及复用、响应式、主题切换或多人协作，就该立刻退到 <style></style> 或外部 .css 文件——style 属性里没法写 @media，也没法用变量或计算逻辑，写多了就是维护噩梦。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！