style属性仅对有视觉表现的HTML元素生效，如<p>、<div>、<h1>～<h6>、<span>、<button>、；在<html>、<head>、<meta>、<script>等无渲染标签上无效，且语法错误（如缺分号、错单位）会导致整条声明静默丢弃。
行内样式能用，但不是所有地方都能写对、写生效——style 属性只在有视觉表现的标签上起作用，语法错一条就整条静默丢弃，连控制台都不报错。
哪些 HTML 标签支持 style 属性？
只有浏览器会渲染出来的元素才认 style：比如 <p>、<div>、<h1>～<h6>、<span>、<button>、<a>。以下情况完全无效：
-
<html>、<head>、<meta>、<script>上加style→ 浏览器直接忽略 -
<body>能写，但color或font-family不会自动继承给子元素，容易误判“没效果” -
<section>、<article>这类语义容器设background-color可见，但设color无效（除非子元素没重写）
<p> 的 style 属性怎么写才不翻车？
<p> 是最常用来试 style 的标签，但写错一个字符就白费功夫。关键约束有四条：
- 属性名必须用短横线：写
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;❌（被当无效值丢弃）
正确示例：<p style="color: #333; font-size: 16px; line-height: 1.5; background-color: #f9f9f9;">文本内容</p>
立即学习“前端免费学习笔记（深入）”；
为什么写了 style 却没效果？常见静默失效场景
浏览器解析 style 是纯字符串匹配，错就丢，不警告也不提示。高频翻车点：
-
style=".p { color: red; }"→ 含 CSS 选择器，整条丢弃 -
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 动态改 p.style 最容易踩的坑
别用 setAttribute('style', ...) 覆盖整个字符串，它会清掉之前所有通过 elem.style.xxx 设置的样式：
- 已有
<p 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' })（批量）
真正难的不是写出来，而是写对之后还要确认它真正在起作用——尤其是嵌套结构里，color 看似没变，可能只是被父级继承覆盖了，而不是 style 没生效。
