style属性仅对可渲染元素生效，如、等，而、等非视觉元素上设置无效；其权重为1000，高于class/id选择器，但无法覆盖!important规则；js操作elem.style仅读写内联样式，需驼峰命名、带单位和分号。
style属性只对可渲染元素生效，html>和上写了也白写
浏览器会直接忽略加在非视觉元素上的 style 属性。比如 看似写了，但既不改变页面文字颜色，也不报错——因为 本身不可见、不参与渲染，color 无法继承下去；<meta>、<script></script>、<style></style> 这些标签同理。
真正该用 style 的地方是：内容型元素，比如 <p></p>、<div>、<code><span></span>、<h1></h1>；结构型容器如 <section></section> 或 <article></article> 虽然技术上支持，但语义优先，应改用 class 配合外部 CSS。
全局样式起点建议选 ：它可渲染、能继承、不影响文档结构，比如 是合理用法。
内联样式优先级高，但不能覆盖!important声明
style 属性本质是内联样式，CSS 权重为 1000，高于 class（100）、id（100）、选择器（10 或 1），所以通常能“赢”过外部样式表规则。但它有个硬限制：无法覆盖带 !important 的规则，哪怕后者来自外部 CSS 文件。
常见错误现象：<p style="color: blue">文字</p> 却显示红色——检查是否被 p { color: red !important; } 覆盖了。
动态 JS 修改时也一样：elem.style.color = "blue" 不会推翻 !important 规则，只能靠 JS 手动移除对应 class 或修改 <style></style> 块内容。
JavaScript 操作 style 对象时，只读内联值，不读 CSS 文件
elem.style 是一个 CSSStyleDeclaration 对象，它只反映 HTML 中 style 属性里写的那些声明，跟 <style></style> 标签或外部 CSS 文件完全无关。
容易踩的坑：
-
elem.style.color返回空字符串，不代表元素没颜色——可能来自 class 或<style></style> -
elem.style.setProperty('color', 'red')会报错，因为setProperty是CSSStyleDeclaration方法，正确写法是elem.style.color = 'red'或elem.style.setProperty('color', 'red')（注意调用对象是elem.style，不是elem） - 驼峰命名：CSS 中的
background-color在 JS 中必须写成backgroundColor；font-size→fontSize；但float是保留字，得用cssFloat
动态设置 style 时，单位和分号不能省，空格要小心
通过 JS 设置 style，本质是拼字符串，所以必须严格遵循 CSS 声明语法：
常见错误现象：
-
elem.style.width = "100"→ 无效，缺单位，得写"100px"或"100%" -
elem.style.cssText = "color: red; font-size: 14px"→ 正确；但若漏掉分号："color: red font-size: 14px"，整个字符串会被丢弃 -
font-family: "Helvetica Neue"必须双引号包裹，JS 中要转义：elem.style.fontFamily = '"Helvetica Neue"' - 末尾多空格+分号（如
"color: red; "）多数浏览器容忍，但老版 IE 可能解析失败
最稳妥的做法是：每个声明都用 elem.style.xxx = yyy 单独赋值，避免手拼字符串出错。
