::first-line伪元素用于设置块级元素首行文本样式,如p::first-line可改变颜色、字体大小和粗细,适用于p、div等块级元素,支持color、font-size等文本属性,不支持margin、padding等盒模型属性,常用于文学排版中首行强调,需注意与::first-letter的样式冲突。

在CSS中,::first-line 伪元素用于设置块级元素中第一行文本的样式。它常用于美化段落的首行,比如在文章排版中突出显示段落开头。
基本语法
p::first-inine {color: #666;
font-size: 1.2em;
font-weight: bold;
}
上面的代码会让每个 p 段落的第一行文字颜色变灰、字号稍大并加粗。
适用场景和限制
::first-line 只作用于块级容器中的第一行文本,常见可用的元素包括 p、div、h1-h6 等。
- 仅对块级元素有效,不能用于内联元素(如 span)
- 样式只应用于当前显示的第一行,受容器宽度影响
- 可继承的文本相关属性大多支持,如 color、font-size、text-decoration 等
- 不支持所有CSS属性,例如 margin、padding、border 等盒模型属性无效
实用示例
以下是一个典型的段落首行强调样式:
立即学习“前端免费学习笔记(深入)”;
color: #8B4513;
font-variant: small-caps;
letter-spacing: 0.05em;
}
这段样式会让段落首行使用棕褐色、小型大写字母,并略微增加字间距,适合文学类网页排版。
注意事项
如果文本被其他内联元素(如 strong 或 a)包裹,::first-line 仍会应用,但优先级可能受具体选择器影响。
同时使用 ::first-letter 和 ::first-line 时,注意两者可能会有样式重叠,需合理控制范围。
基本上就这些,::first-line 是一个轻量又实用的排版工具,特别适合提升文章可读性和视觉层次。用好了能让页面更精致。










