::first-line仅作用于块级容器首行可见纯文本，不穿透子元素；失效常因非块级显示、首行无文本、布局破坏或样式受限；仅支持部分文本属性，与:first-child无关，且随响应式断行动态变化。
first-line 伪元素能选中哪些内容
常见失效原因包括： 以下写法无效： 立即学习“前端免费学习笔记（深入）”； 如果真想“仅给第一段的第一行加样式”，得组合写： 最常被忽略的一点：响应式断行会动态改变哪几字属于“第一行”，所以 ::first-line 只作用于块级容器（如 、）的第一行文本，且仅在该行**视觉上可见的纯文本内容**上生效。它不匹配内联元素（如 、）的样式，也不穿透到子元素内部——哪怕子元素恰好落在第一行，它的样式也不会被 ::first-line 覆盖。
为什么给
加了 ::first-line 却没效果
display: inline 或未声明 display，默认 inline 的元素不支持 ::first-line）margin-top 的子块，导致首行无文本）float、position: absolute 或 display: flex/inline-flex 等破坏正常流布局的属性，使浏览器无法确定“第一行”的文本范围!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::first-line → 选中这个 元素渲染出来的第一行文字（不管它里面嵌了多少标签）p:first-child::first-line，而不是单写其中一个。::first-line 的效果在窗口缩放时可能突然消失或跳变——它不是静态选中前 N 个字符，而是依赖当前排版结果的实时计算。
