style属性仅支持内联声明块，即property: value;格式，不支持伪类、伪元素、媒体查询、@规则、选择器或注释；其特异性为1000，优先级最高，会覆盖外部css及!important。
style 属性能写绝大多数标准 CSS 属性，但不能写伪类、伪元素、媒体查询、@规则（如 @media、@keyframes）、选择器或 @import —— 它只接受单个元素的「声明块」，也就是 property: value; 这种格式。
哪些 CSS 属性可以在 style 中用
几乎所有视觉相关的标准 CSS 属性都支持，比如：
-
color、background-color、font-size、margin、padding、border、width、height、display、position等 - 带单位的值必须写全：
width: 100px或width: 100%有效，width: 100无效 - 属性名必须用短横线分隔：
background-color正确，backgroundColor或background_color都不认 - 字体名含空格时需加引号：
font-family: "Helvetica Neue"或font-family: 'Times New Roman'
哪些绝对不能写进 style 属性
浏览器会直接忽略整条 style 值，如果里面混入以下内容：
- 伪类：比如
:hover、:focus、:nth-child(2) - 伪元素：比如
::before、::placeholder - 媒体查询：
@media (max-width: 768px) { ... } - 选择器：
.box { color: red; }或p span { font-weight: bold; } - @规则：
@keyframes slide { ... }、@import url(...) - 注释：
/* 这样不行 */会导致整个style值被丢弃
常见错误现象和调试线索
明明写了样式却没生效？先检查这几处：
- 写了
style="color: red !important"——!important在内联样式里合法，但没必要；它本就优先级最高（特异性 1000），加了反而容易掩盖真实问题 - DevTools 的 Styles 面板里看到某条样式标着
inline，但颜色/尺寸没变 —— 很可能是拼写错误（如把backgound-color打成backgound）或值非法（如font-size: largepx） - 写了
style="display: flex; justify-content: center;"却没居中 —— 检查父容器是否设置了height或是否被其他样式（比如float）干扰 - 动态设置时用
elem.style.cssText = "..."覆盖了之前所有内联样式，而不是追加 —— 若需叠加，建议用elem.style.setProperty('color', 'blue')
为什么有些属性“看起来”不生效
不是所有 HTML 元素都支持全部 CSS 属性，例如：
-
<meta>、<link>、<script></script>这类元信息标签，style属性完全无效 —— 它们本身不可渲染，没有视觉表现 -
<input type="hidden">不显示，所以color、background等样式设了也看不见 -
display: none后再设animation或transition，动画不会触发 —— 元素已脱离渲染流 - 某些 CSS 属性需要特定上下文才起作用，比如
z-index只对定位元素（position不是static）有效
最常被忽略的一点：内联样式是「硬编码」到 DOM 节点上的，一旦用 JS 修改了 elem.style.xxx，就覆盖了 HTML 中原始的 style 值；而用 setAttribute('style', ...) 则会重写整条字符串 —— 这两种操作行为不同，但效果都不可逆，除非你保留原始值。
