）的第一行文本，且仅在该行**视觉上可见的纯文本内容**上生效。它不匹配内联元素（如 、）的样式，也不穿透到子元素内部——哪怕子元素恰好落在第一行，它的样式也不会被 ::first-line 覆盖。

为什么给

加了 ::first-line 却没效果

常见失效原因包括：

• 父容器未设置为块级显示（例如 display: inline 或未声明 display，默认 inline 的元素不支持 ::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::first-line → 选中这个

  元素渲染出来的第一行文字（不管它里面嵌了多少标签）

如果真想“仅给第一段的第一行加样式”，得组合写：p:first-child::first-line，而不是单写其中一个。

最常被忽略的一点：响应式断行会动态改变哪几字属于“第一行”，所以 ::first-line 的效果在窗口缩放时可能突然消失或跳变——它不是静态选中前 N 个字符，而是依赖当前排版结果的实时计算。