只有对有默认视觉表现的HTML元素（如<div>、<p>、<h1>～<h6>、<span>、<button>、<a>、<body>等）设置style才生效；语义标签如<section>设background-color有效但color无效；<html>、<head>等完全无效。
直接在支持视觉渲染的 HTML 标签上写 style="属性: 值;" 就能生效，但必须严格满足格式、标签、语法三重条件，否则浏览器会静默丢弃，不报错也不提示。
哪些标签加 style 才真正起作用
只对有默认视觉表现的元素有效：
-
<div>、<p>、<h1>～<h6>、<span>、<button>、<a>等常规内容容器或交互元素 -
<body>可以加，但color或font-family不会自动继承给子元素，容易误判“没效果” -
<section>、<article>等语义标签本身无默认样式：设background-color可见，但设color无效（除非子元素未重写） - 完全无效的标签：
<html>、<head>、<meta>、<script>—— 浏览器直接忽略
style 属性值的正确写法和常见翻车点
它不是 CSS 文件，也不是 JS 对象，而是 HTML 属性值，需同时符合 HTML 字符串解析规则和 CSS 声明语法：
- 属性名必须用短横线小写：
background-color✅，backgroundColor❌（那是 JS 的写法） - 每条声明后必须加分号：
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）
