内联样式不生效主因是语法错误：style属性只接受property: value;格式，禁止选择器、伪类、媒体查询、!important及驼峰命名；分号缺失、引号遗漏、单位缺省或setattribute覆盖均会导致声明静默丢弃。
内联样式能生效，但绝大多数“没反应”不是浏览器问题，而是style属性里写了浏览器根本不认的语法——它不报错，只静默丢弃整条声明。
style属性里只能写纯CSS声明，不能写选择器或规则块
浏览器解析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="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设置的属性：
el.style.padding = '10px'; el.style.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只对有视觉表现的元素起作用。以下情况会静默失效：
-
、、<meta>、<script></script>上加style→ 浏览器直接忽略 -
能写，但color或font-family不会自动继承到子元素，容易误判“没生效” -
<section></section>、<article></article>这类语义容器本身无默认样式，设background-color可见，但设color无效（除非子元素没重写）
真正容易被忽略的是：伪类、伪元素、@media都不能写进style属性，哪怕语法没错也完全不触发——需要这些，必须走<style></style>块或外部 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
