style属性仅支持「属性: 值;」格式的声明列表，不支持选择器、伪类、媒体查询等css规则；分号为唯一合法分隔符，漏写将导致后续声明失效；动态修改应优先使用element.style.xxx或object.assign，避免setattribute覆盖。
style属性只能写声明，不能写选择器或规则块
浏览器只认 style 属性里那一串「属性: 值;」格式的声明列表，不是 CSS 文件的拷贝粘贴区。写成 style=".btn { color: red; }" 或 style=":hover { opacity: 0.8; }" 完全无效，整条会被忽略——这不是兼容性问题，是语法根本不合法。
常见错误场景包括：从 DevTools 的 Styles 面板直接复制带选择器的样式、把媒体查询塞进 style、或者误以为能用 !important 提权（其实 style 本身权重就是 1000，已经最高）。
-
color、font-size、background-color这类标准属性可直接用 - 伪类（
:hover）、伪元素（::before）、@media、@keyframes全部不支持 - 属性名必须用短横线分隔，比如
font-family，不能写fontFamily - 值中含空格或特殊字符（如
Times New Roman）时，建议加单引号或双引号
分号是分隔符，不是可有可无的标点
style 的值本质是一个声明列表，分号（;）是唯一被识别的分隔符。漏写会导致后续声明失效，但浏览器通常不会报错，而是静默截断。
例如：style="color: red; font-size: 16px; background-color: #fff" 中末尾少了个分号，不影响；但写成 style="color: red font-size: 16px;"（中间缺分号），font-size 就完全不解析。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个声明末尾加分号是稳妥做法，即使最后一个也建议保留
- 冒号前后不要加空格？其实可以，
color : red合法，但易读性差，不推荐 - 属性值里出现分号（比如 URL 中带参数）必须编码或避免，否则会被误判为声明结束
JavaScript 动态改 style 时，别直接覆盖整个字符串
用 JS 设置 element.style.color = "blue" 是安全的，但若用 element.setAttribute('style', '...') 或拼接字符串重写整个 style 值，会清掉之前所有内联样式——包括其他脚本或框架可能设置的属性。
比如一个按钮已有 style="padding: 8px; border: 1px solid #ccc;"，你执行 el.setAttribute('style', 'color: red;')，结果 padding 和 border 全没了。
- 优先用
element.style.xxx属性赋值，它只影响单个字段 - 需要批量设置时，用
Object.assign(el.style, { color: 'red', fontSize: '14px' }) - 想清除某个内联样式？设为
''，比如el.style.color = ''，不是delete el.style.color
内联样式优先级高，但“高”不等于“可靠”
style 的特异性是 1000，确实能压过 .class、#id 甚至带 !important 的外部规则。但这只是层叠顺序的一环，实际表现还受继承、初始值、CSS 逻辑属性（如 margin-inline-start）是否被支持等影响。
最常被忽略的是：一旦用了 style，就等于把该属性“锁死”在元素上。哪怕后来 JS 删除了 class、移除了外部样式表，只要 style 属性还存在（哪怕值为空字符串），该属性就不会自动回退到 CSS 规则的计算值。
- 调试时看到样式没变，先检查元素上有没有残留的
style属性 - 邮件模板、SSR 输出等受限环境才真正需要大量内联样式
- 日常开发中，
style更适合作为临时调试手段或动态交互的终点，而非起点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
