::first-line伪元素用于设置块级元素首行文本样式,语法为p::first-line{property:value;},推荐使用双冒号写法,常用于改变首行颜色、字体大小或添加背景,仅支持文本相关属性且受容器宽度影响。

在CSS中,::first-line 伪元素用于选中块级元素中第一行的文本,并对其应用样式。它常用于美化段落的首行,比如在文章排版中突出首行文字。
基本语法
p::first-line { property: value; }上面的代码表示对所有 p 标签内的第一行文本设置样式。注意,双冒号(::)是CSS3的写法,用于区分伪类和伪元素,虽然单冒号(:first-line)在旧版本中也支持,但推荐使用双冒号。
常见应用场景
- 改变首行颜色:让段落首行颜色更醒目,提升可读性。
- 设置首行字体大小或粗细:实现类似“首行放大”的排版效果。
- 添加背景或斜体:用于引言、摘录等特殊段落样式。
使用注意事项
- 只适用于块级元素,如 p、div、h1 等,不能用于内联元素。
- 样式仅作用于实际显示的第一行,受容器宽度影响。如果页面缩放或响应式布局导致换行变化,首行内容也会变化。
- 只能设置有限的文本相关属性,如 color、font、text-decoration 等,不能设置 margin、padding、background-image 等布局属性(部分浏览器可能不支持复杂背景)。
示例代码
p::first-line { font-weight: bold; color: #d63384; font-size: 1.1em; }这段代码会让每个段落的第一行加粗、变色并略微放大,适合用于文章开头的强调。
基本上就这些,合理使用 ::first-line 可以让文本排版更有层次感,但要注意兼容性和实际显示效果。










