::first-line 失效主因是父元素未形成块级行盒，仅对 display: block/table-cell/list-item 有效；它只支持文本相关属性，不支持盒模型及变换类样式，且首行范围随响应式动态变化。
为什么 ::first-line 有时完全不生效
根本原因几乎总是父元素没形成「块级行盒」。它只对 display: block、display: table-cell 或 display: list-item 这类能触发 BFC 的容器起作用；display: flex、display: grid、display: inline 下直接失效，连 warning 都不会报。
常见静默失败场景：
- 把
p::first-line套在<div class="wrapper"> 上，而 <code>.wrapper设了display: flex - 段落开头有
<span></span>（零宽空格）或全角空格<span> </span>，浏览器把它们当“首字符”，但渲染时不可见，导致首行内容错位 - 用了
font-size: 0或line-height: 0压缩父容器，伪元素样式其实已应用，但文字被压没了 -
color、font-size、font-weight、font-style、font-family -
text-decoration、text-transform、letter-spacing、word-spacing -
line-height（注意：它控制整行盒高度，可能撑开后续行距） -
background-color（唯一可靠背景方式；background-image在 Safari 和旧 Chrome 中常断裂） -
margin、padding、border、width、height -
transform、filter、display、visibility -
background（简写形式）、background-position等非 color 子属性 - 小屏下首行只剩一个词（如“然而”），加粗后突兀 → 加媒体查询兜底：
@media (max-width: 480px) { p::first-line { font-weight: normal; } } - 中英文混排时因字体度量差异，首行断点偏移 → 避免依赖视觉首行做语义强调；真要锁定“第一句话”，得用
<span class="lead-sentence"></span>手动包裹 -
font-size: clamp(1rem, 2.5vw, 1.2rem)缩放时，::first-line 字号更新滞后于布局重排 → 测试时手动触发重绘（比如 toggle 一个无意义 class）确认是否同步
::first-line 支持哪些 CSS 属性
它不是通用样式接管器，只接受与「文本行内渲染」直接相关的属性。超出范围的声明会被浏览器静默丢弃——不报错、不警告、也不在 DevTools 中标灰。
安全可用（所有现代浏览器稳定支持）：
明确禁用（写了等于白写）：
响应式下首行范围动态重算的陷阱
::first-line 绑定的是「当前视口宽度下实际渲染出的第一行」，不是 HTML 源码里的前 N 个字。窗口缩放、字体加载延迟、系统字体替换，都会让断行点漂移——你设的 p::first-line { font-weight: bold; } 可能某次 resize 后突然套到第二句开头。
典型问题与对策：
和 ::first-letter 共存时的层叠关系
两者可以同时存在，但渲染顺序固定：::first-letter 始终嵌套在 ::first-line 内部。这意味着它的样式会叠加其上，且优先级更高。
例如：
p::first-line { color: #333; background-color: #f9f9f9; }
p::first-letter { color: #d63384; font-size: 2em; }
结果是：首字母红色放大，其余首行文字灰色+浅灰底色。但如果给 ::first-letter 也设 background-color，它会盖住 ::first-line 的背景，因为层叠上下文更靠前。
容易踩的坑：
- 误以为
::first-line能覆盖::first-letter的颜色 —— 实际上后者层级更高，必须显式重写 - 在同一个选择器链里反复改
font-size，比如先设p::first-line { font-size: 1.2em; }，再设p::first-letter { font-size: 2em; }，最后又回过头调p::first-line→ 容易漏掉首字母是否被正确继承
真正难处理的从来不是语法，而是它依赖渲染结果而非 DOM 结构：你没法预判用户开了几倍系统缩放、是否装了广告屏蔽插件影响字体加载、甚至夜间模式切换后字体度量变化——这些都会让“哪一行是第一行”变成运行时才确定的事。
