内联样式仅适用于紧急覆盖或动态注入，优先级最高但损害可维护性、响应性和复用性；仅对有视觉表现的元素（如、、等）生效，对、等非渲染标签无效。
内联样式不是“写CSS”的常规路径，而是紧急覆盖或动态注入的临时手段；它优先级最高，但代价是破坏可维护性、无法响应、不能复用。
哪些HTML标签上写style才真正生效
只对「有视觉表现」的元素有效：<div>、<code><p></p>、<h1></h1>～<h6></h6>、<span></span>、<button></button>等。以下情况浏览器直接忽略，不报错也不渲染：
-
<meta>、<link>、<script></script>、上加style→ 完全无效（这些标签本身不参与渲染） -
虽然能写，但color或font-family不会自动继承到子元素，容易误判“没生效” -
<section></section>、<article></article>这类语义容器设background-color可见，但设color通常无效（除非子元素没重写）
style属性值的语法细节和常见静默失效点
浏览器解析 style 是纯字符串匹配，语法错就丢弃整条声明，且不提示错误。必须同时满足 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;❌（被当无效值丢弃） - 不支持伪类、媒体查询、
!important：:hover、@media、color: red !important;全部静默忽略
JavaScript 动态操作 style 时最常踩的坑
DOM 元素的 style 对象只反映内联样式，不是通用样式 API。高频错误包括：
- 用
setAttribute('style', ...)覆盖整个字符串 → 清掉之前所有通过el.style.xxx =设置的样式（比如已有padding和border，再 setAttribute 就全丢了） - 读取样式误用
el.style.color→ 只返回内联值，查不到 class 或外部 CSS 设的颜色；真实生效值要用getComputedStyle(el).color - 设置时写错命名：
el.style.background-color = 'red'报错（连字符是减法运算符），必须用驼峰：el.style.backgroundColor = 'red' - 批量修改建议用
Object.assign(el.style, { color: 'blue', fontSize: '14px' })，比反复赋值更安全
真正难的不是让一行 style 显示出来，而是记住它永远无法响应屏幕尺寸变化、无法复用、无法继承主题变量——一旦你开始写第二个相似样式，就该停下来想：是不是该换 class 了。
