内联样式必须写在style属性中且仅对有视觉表现的元素生效;语法需用短横线、分号分隔、带空格值加引号、单位不可省;特异性为1000,伪类伪元素和@media不可用。

直接写在元素的 style 属性里,用分号分隔 CSS 声明,这是唯一合法方式。 其他地方写(比如自定义属性、class 或错位的 style 标签)全无效。
style 属性必须写在哪些 HTML 标签上才生效
只对「有视觉表现」的元素有效:<div>、<code><p></p>、<span></span>、<h1></h1>~<h6></h6>、<button></button>、<a></a> 等。以下情况会静默失效:
-
、、<meta>、<script></script>上加style—— 浏览器直接忽略 -
虽然能写,但color或font-family不会自动继承到子元素,容易误判“没生效” -
<section></section>、<article></article>这类语义容器本身无默认样式,设background-color可见,但设color无效(除非子元素没重写)
style 值的语法细节和常见错误
值是纯 CSS 声明块,但受 HTML 属性解析限制,不是所有 CSS 写法都能照搬:
- 必须用短横线命名:
background-color✅,backgroundColor❌(JS 操作时才用驼峰) - 每条声明后加分号:
color: red; font-size: 14px;✅,color: red font-size: 14px❌(缺分号 → 整条失效) - 带空格的值必须加引号:
font-family: "Helvetica Neue";✅,font-family: Helvetica Neue;❌ - 单位不能省:
width: 100%✅,width: 100❌(会被当无效值丢弃) - 末尾分号可省,但混写时易出错,建议统一保留
内联样式和 CSS 规则冲突时谁赢
内联样式的特异性固定为 1000,高于任何 class(10)、ID(100)甚至带 !important 的外部规则——除非那个 !important 也在 style 属性里:
-
<p style="color: red">…</p>+.p-red { color: blue !important; }→ 仍显示红色 -
<p style="color: red !important">…</p>+ 同上 → 还是红色(!important在内联中不报错但被忽略,权重已满) - 想覆盖内联样式?只能用 JS 改:
elem.style.color = 'blue',或删掉整个style属性再重设
真正容易被忽略的是:伪类(:hover)、伪元素(::before)、@media 查询都不能写进 style 属性,哪怕语法没错也完全不触发。需要这些,必须走 <style></style> 块或外部 CSS 文件。











