使用::first-line伪元素可对块级元素的第一行文本设置样式，如颜色、字体等，仅适用于块级元素且支持有限css属性，与选择首个子元素的:first-child不同。
在CSS中，选择“第一行文字”通常指的是对一个块级元素中的首行文本进行样式控制。你可以使用 ::first-line 伪元素来实现这个效果。
使用 ::first-line 伪元素
::first-line 可以选中容器内第一行的文本内容，并为其单独设置样式。这在段落、标题或任何包含多行文本的块级元素中非常有用。
示例：
html:
<p>这是一段很长的文字，用来演示第一行样式的应用。当文本足够长时，第二行不会被选中。</p>
CSS:
p::first-line {
color: red;
font-weight: bold;
font-size: 1.2em;
}
在这个例子中，只有段落的第一行文字会变成红色、加粗并放大，第二行及之后的内容不受影响。
注意事项和限制
::first-line 有一些使用上的限制，需要注意：
立即学习“前端免费学习笔记（深入）”；
- 只能应用于块级元素（如 p、div、h1-h6）
- 不能用于行内元素（如 span、a），除非将其 display 改为 block 或类似类型
- 可应用的css属性有限，主要支持文本相关的样式（颜色、字体、背景等），不支持布局类属性如 margin、padding
- 实际“第一行”取决于容器宽度和字体大小，响应式布局中可能动态变化
与:first-child 的区别
不要把 ::first-line 和 :first-child 混淆。
- :first-child 选择的是父元素下的第一个子元素，不管内容是什么
- ::first-line 选择的是元素内部第一行的文本内容，属于伪元素，不是真实dom节点
比如，一个 div 里有多个 p 标签，:first-child 会选中第一个 p 元素，而 p::first-line 会选中每个 p 元素的第一行。
基本上就这些。合理使用 ::first-line 能让你的文本排版更精致，特别适合文章首行突出显示的场景。