css段落首行样式不同怎么写_使用css::first line

::first-line伪元素仅作用于块级元素首行，支持字体、颜色、文本装饰等有限样式，text-indent需设在元素本身而非伪元素内。

用 ::first-line 伪元素可以单独设置段落首行的样式，比如首行缩进、变色、加粗等。它只作用于块级元素（如 p、div）的第一行文本，且仅支持部分 CSS 属性。

支持的常用样式属性

::first-line 允许设置的样式有限，主要包括：

• 字体相关： font-size、font-weight、font-family、font-style
• 颜色与背景： color、background-color
• 文本装饰： text-decoration、text-transform、letter-spacing
• 行高与对齐： line-height、text-align（注意：text-align 在某些浏览器中可能不生效）

典型用法：首行缩进 + 样式强化

中文排版常需首行缩进两个字符，同时让首行更醒目：

p::first-line {
  text-indent: 2em;
  font-weight: bold;
  color: #2c3e50;
}

⚠️ 注意：text-indent 虽常用于段落首行缩进，但它**不属于 ::first-line 支持的属性**，应直接写在 p 上；::first-line 里只能设它支持的样式，比如加粗或变色。

实际应用注意事项

使用时容易踩坑，需留意以下几点：

• ::first-line 只匹配渲染后的第一行——如果段落宽度变化（如响应式布局），首行内容变动，样式会自动重算
• 不能设置 width、height、margin、padding、border 等盒模型属性
• 嵌套元素（如 span、strong）内的样式会覆盖 ::first-line，优先级更高
• 建议用双冒号 ::first-line（现代标准），单冒号 :first-line 为旧写法，虽仍兼容但不推荐

不复杂但容易忽略细节，按规范写就能稳定生效。