style属性仅对有视觉表现的HTML元素生效，如<div><p><span>等；在<meta><script>等无渲染标签上无效；必须严格遵循“属性: 值;”格式，缺分号、错单位、混选择器等均导致整条声明静默丢弃。
能加，但必须写对格式、选对标签、避开语法陷阱，否则浏览器静默丢弃，连错误提示都不给。
哪些 HTML 标签上写 style 才真正生效
只对「有视觉表现」的元素有效：<div>、<p>、<h1>～<h6>、<span>、<button>、<a> 等。以下情况完全无效：
-
<html>、<head>、<meta>、<script>上加style→ 浏览器直接忽略 -
<body>虽然能写，但color或font-family不会自动继承到子元素，容易误判“没生效” -
<section>、<article>这类语义容器本身无默认样式：设background-color可见，但设color无效（除非子元素没重写）
style 属性值的写法细节和常见翻车点
它不是 CSS 文件，也不是 JS 对象，而是 HTML 属性值，必须同时满足 HTML 和 CSS 的双重语法规则：
- 属性名必须用短横线小写：
background-color✅，backgroundColor❌（那是 JS 的elem.style.backgroundColor写法） - 每条声明后必须加分号：
color: red; font-size: 14px;✅，color: red font-size: 14px❌（缺分号 → 后续整条失效） - 带空格的值必须加引号：
font-family: "Helvetica Neue";✅，font-family: Helvetica Neue;❌ - 单位不能省：
width: 100%✅，width: 100❌（被当无效值丢弃） - 末尾分号可省，但混写时极易出错，建议统一保留
为什么写了却没效果？常见静默失效场景
浏览器解析 style 是纯字符串匹配，语法错就丢弃整条声明，不报错也不警告：
立即学习“前端免费学习笔记（深入）”；
-
style=".btn { color: red; }"→ 含选择器，整条丢弃 -
style=":hover { opacity: 0.8; }"→ 伪类不支持，完全不触发 -
style="@media (max-width: 768px) { font-size: 14px; }"→ 媒体查询不解析 -
style="color: red !important;"→!important被忽略（内联权重已是 1000） -
style="color:red;font-size:16px;background-color:#eee"→ 缺分号 →background-color不生效
JavaScript 动态改 style 的最大坑
别用 setAttribute('style', ...) 覆盖整个字符串，它会清掉之前所有通过 elem.style.xxx 设置的样式：
- 已有
<div style="padding: 8px; border: 1px solid #ccc;"> - 再执行
el.setAttribute('style', 'color: red;')→padding和border全部消失 - 正确做法：
el.style.color = 'red'（单个赋值），或Object.assign(el.style, { color: 'red', fontSize: '14px' })（批量） - 清除某项：
el.style.color = ''，不是delete el.style.color
真正容易被忽略的是：你写的那行 style="..." 字符串，只要有一个分号漏了、一个引号错了、一个单位少了，后面所有样式就全白写——DevTools 的 Styles 面板里看不到带「inline」标记的条目，说明它根本没进解析流程。
