CSS的:first-line伪元素选择器用于选中块级元素的第一行文本，开发者可以通过它单独为文本首行设置样式，不需要额外给首行内容添加额外的HTML标签，非常适合用来调整段落的首行缩进、字体等样式。
:first-line选择器的基本语法
:first-line选择器需要依附于块级元素使用，不能单独生效，常见的使用场景是给<p>段落标签设置首行样式。它的语法格式如下：
/* 选中p元素的第一行文本 */
p:first-line {
/* 这里写首行生效的样式属性 */
}
调整首行缩进的方法
首行缩进是中文排版的常见需求，使用:first-line选择器可以直接设置text-indent属性实现，这个属性属于:first-line支持生效的属性范围。示例代码如下：
p {
font-size: 16px;
line-height: 1.5;
}
/* 设置段落首行缩进2个字符 */
p:first-line {
text-indent: 2em;
}
对应的HTML结构如下：
<p>这是一段测试文本，用来演示CSS:first-line选择器的首行缩进效果。当文本内容超过一行时，只有第一行会应用我们设置的缩进样式，后续行的排版会保持默认的文本流规则，不会受到首行样式的影响。</p>
设置首行字体的方法
:first-line选择器支持设置字体相关的属性，比如font-family、font-size、font-weight等，我们可以单独给首行设置不同的字体样式，和后续行形成区分。示例代码如下：
p {
font-family: "微软雅黑", sans-serif;
font-size: 14px;
color: #333;
}
/* 设置首行字体为宋体，加粗，字号稍大 */
p:first-line {
font-family: "宋体", serif;
font-size: 16px;
font-weight: bold;
color: #000;
}
:first-line选择器的生效属性限制
不是所有CSS属性都能在:first-line选择器中生效，只有和文本样式、背景相关的部分属性可以使用，常见的生效属性如下：
- 字体相关：
font、font-family、font-size、font-weight、font-style - 文本相关：
color、text-decoration、text-transform、letter-spacing、word-spacing、text-indent - 背景相关：
background、background-color、background-image
像margin、padding、border这类盒模型属性是无法在:first-line中生效的，设置后不会有任何效果。
使用注意事项
在使用:first-line选择器时，需要注意以下几点：
- 只能用于块级元素，行内元素使用
:first-line不会生效 - 首行的范围是根据元素的宽度动态计算的，当元素宽度变化、字体大小变化或者内容变化时，首行包含的内容会自动调整
- 如果块级元素的第一行是图片等替换元素，
:first-line不会选中图片，只会选中文本首行
注意：
:first-line是伪元素，在CSS3规范中要求伪元素使用双冒号::first-line，但为了兼容旧版本浏览器，单冒号:first-line的写法也依然支持，实际开发中两种写法都可以使用。
CSS_first-line首行样式首行缩进字体设置修改时间：2026-07-04 20:24:23