内联样式唯一合法写法是直接在HTML元素的style属性中写“属性: 值;”格式声明；不支持选择器、伪类、媒体查询等，语法错误（如缺分号、单位、引号）会静默丢弃整条声明。
直接在 HTML 元素的 style 属性里写 CSS 声明是唯一合法的内联样式方式，但绝大多数“不生效”问题不是浏览器兼容性导致的，而是语法或语义错误被静默忽略——它根本不报错，只丢弃整条声明。
style 属性值必须是纯声明列表，不能含选择器或规则块
浏览器解析 style 时只认 property: value; 格式，其余一概无视。常见无效写法包括：
-
style=".btn { color: red; }"→ 含类选择器，整条丢弃 -
style=":hover { opacity: 0.8; }"→ 伪类不支持，完全不触发 -
style="@media (max-width: 768px) { font-size: 14px; }"→ 媒体查询不解析 -
style="color: red !important;"→!important被忽略（权重已满）
DevTools 的 Styles 面板里看到带「inline」标记的样式，才是真正被解析生效的部分；其他看似写进去了，其实连语法树都没进。
分号、引号、单位缺一不可，漏写即失效
style 的值本质是字符串，但浏览器按 CSS 声明规则做严格匹配。以下任一条件不满足，后续所有声明都会被截断：
立即学习“前端免费学习笔记（深入）”；
- 声明间**必须用分号分隔**：
style="color: red font-size: 14px;"中缺分号 →font-size不生效 - 含空格的值**必须加引号**：
style="font-family: 'Times New Roman';"✅，font-family: Times New Roman;❌ - 长度/尺寸类属性**单位不可省**：
width: 100%✅，width: 100❌（被当无效值丢弃） - 属性名必须用**短横线小写**：
background-color✅，backgroundColor❌（JS 操作时才用驼峰）
JavaScript 动态操作 style 时，setAttribute 是最大陷阱
用 element.setAttribute('style', '...') 会覆盖整个内联样式字符串，清掉之前所有通过 element.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
注意：el.style.color 只读取内联值，查不到 class 或外部 CSS 设的颜色；要读真实计算值，得用 getComputedStyle(el).color。
哪些标签上写 style 根本没用
style 属性只对参与渲染的视觉元素生效，写在非渲染标签上会被浏览器直接忽略：
- ✅ 有效：
<div>、<p>、<h1>、<button>、<span> - ❌ 无效：
<html>、<head>、<meta>、<script>、<link>—— 这些标签本身不产生视觉输出 - ⚠️ 易误判：
<body>上设color看似没效果，是因为子元素通常重写了该属性，并非style失效
真正难的不是写对一行 style，而是它天生无法响应屏幕变化、无法复用、无法继承 CSS 变量——一旦你开始写第二个相似样式，就该立刻停手，抽到外部 CSS。
