style属性可以写任何CSS样式，包括但不限于：颜色（color）字体（font-family,font-size,font-weight）背景（background-color,background-image）边框（border,border-width,border-color）内边距（padding）外边距（margin）宽高（width,height）位置（position,top,l

style属性仅支持单个元素的内联CSS声明块（如`color: red; font-size: 14px;`），具备最高特异性（1000），能覆盖所有外部样式甚至`!important`，但严格禁止伪类、伪元素、媒体查询、@规则、选择器和注释——一旦混入即导致整条style值被浏览器忽略；它兼容绝大多数视觉相关标准属性，但要求属性名用短横线分隔、带单位的值必须写全、字体名含空格需加引号；同时需警惕常见陷阱：拼写错误、非法值、不可渲染元素（如``）上设样式无效、`display: none`禁用动画、`z-index`依赖定位上下文，以及JS动态修改时`elem.style.xxx`或`setAttribute('style', ...)`会彻底覆盖原有内联样式——掌握这些边界与细节，才能真正用好这个强大却苛刻的样式入口。

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="max-width:100%" —— !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 属性，例如：

• 、、 这类元信息标签，style 属性完全无效 —— 它们本身不可渲染，没有视觉表现
• 不显示，所以 color、background 等样式设了也看不见
• display: none 后再设 animation 或 transition，动画不会触发 —— 元素已脱离渲染流
• 某些 CSS 属性需要特定上下文才起作用，比如 z-index 只对定位元素（position 不是 static）有效

最常被忽略的一点：内联样式是「硬编码」到 DOM 节点上的，一旦用 JS 修改了 elem.style.xxx，就覆盖了 HTML 中原始的 style 值；而用 setAttribute('style', ...) 则会重写整条字符串 —— 这两种操作行为不同，但效果都不可逆，除非你保留原始值。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~