::first-line仅作用于块级容器首行可见纯文本，不穿透子元素；失效常因非块级显示、首行无文本、布局破坏或样式受限；仅支持部分文本属性，与:first-child无关，且随响应式断行动态变化。
first-line 伪元素能选中哪些内容
::first-line 只作用于块级容器（如 <p></p>、<div>、<code><h1></h1>）的第一行文本，且仅在该行**视觉上可见的纯文本内容**上生效。它不匹配内联元素（如 <span></span>、<strong></strong>）的样式，也不穿透到子元素内部——哪怕子元素恰好落在第一行，它的样式也不会被 ::first-line 覆盖。
为什么给 <p></p> 加了 ::first-line 却没效果
常见失效原因包括：
- 父容器未设置为块级显示（例如
display: inline或未声明 display，默认 inline 的元素不支持::first-line） - 第一行实际为空（比如开头是
<br>、<img alt="css 想给第一行文字加样式怎么做_使用 first-line 伪元素" >或带margin-top的子块，导致首行无文本） - 使用了
float、position: absolute或display: flex/inline-flex等破坏正常流布局的属性，使浏览器无法确定“第一行”的文本范围 - CSS 优先级被更高权重的规则覆盖（例如内联样式或
!important冲突）
实际可用的样式属性非常有限
::first-line 仅支持部分文本相关属性，其他一律忽略。能用的包括：
-
color、background、font-*（如font-size、font-weight） -
text-decoration、text-transform、letter-spacing、word-spacing -
line-height（但注意：它只影响该伪元素自身行高，不改变整个段落的行高计算）
以下写法无效：
立即学习“前端免费学习笔记（深入）”；
div::first-line {
margin: 10px; /* 忽略 */
padding: 5px; /* 忽略 */
border: 1px solid; /* 忽略 */
width: 100%; /* 忽略 */
display: block; /* 忽略 */
}和 first-child 别搞混了
::first-line 是伪元素，作用于文本；:first-child 是伪类，匹配的是 DOM 中第一个子元素节点。两者完全无关：
-
p:first-child→ 选中作为父元素第一个子节点的<p></p> -
p::first-line→ 选中这个<p></p>元素渲染出来的第一行文字（不管它里面嵌了多少标签）
如果真想“仅给第一段的第一行加样式”，得组合写：p:first-child::first-line，而不是单写其中一个。
最常被忽略的一点：响应式断行会动态改变哪几字属于“第一行”，所以 ::first-line 的效果在窗口缩放时可能突然消失或跳变——它不是静态选中前 N 个字符，而是依赖当前排版结果的实时计算。
