p::first-line生效需满足块级上下文、纯文本首行、现代浏览器三条件；不满足时浏览器不生成line box，导致静默失效，且仅支持color、font-size等文本属性，不支持盒模型属性。
p::first-line 能生效，但必须满足块级上下文、纯文本首行、现代浏览器三硬条件；不满足时样式静默失效，连 DevTools 都不报错。
为什么 p::first-line 写了却完全没反应
不是语法错误，而是浏览器根本没生成可匹配的行盒（line box）。常见断点如下：
- 父容器用了
display: flex或display: grid→ 伪元素被直接忽略 -
p被设为display: inline，或你误对span、a使用 → 不形成块级格式化上下文（BFC） - 段落开头有
<img>、<svg>、<iframe>或零宽字符（如\u200B）→ 行盒起始被截断，首行为空 -
font-size: 0或line-height: 0.1→ 首行高度坍缩，无内容可作用 - 用了
white-space: nowrap或pre→ 折行逻辑失效，首行判定失准
p::first-line 实际能用哪些 CSS 属性
它只接受影响「文本渲染结果」的属性，其他一律静默丢弃（不报错、不警告、不生效）：
- ✅ 安全可用：
color、font-size、font-weight、font-style、text-transform、letter-spacing、line-height、background-color - ⚠️ 有条件支持：
background-color在 Chrome/Firefox 稳定，Safari 16.4+ 才可靠；text-indent虽能生效，但它作用于整段，不是首行专属 - ❌ 完全无效：
margin、padding、border、width、height、display、position、background-image
想控制“前 N 字”或“首句”怎么办
::first-line 绑定的是渲染后第一行的实际文本范围，不是 HTML 源码顺序，也不是固定字符数。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 桌面端首行可能是前 15 个汉字，手机屏下只剩前 3 个 → 样式自动 applied 到新范围
- 一个超长英文单词换行，首行可能只剩字母
“T”→ 加粗/变色只作用于这一个字母 - 需要精确控制“前 5 字字距”或“首句背景”，
::first-line做不到，必须手动用<span class="first-sentence">包裹 - 若需首字下沉 + 首行高亮组合效果，
::first-letter会嵌套在::first-line内部，不能并列控制；且两者共存时，background-color可能在首字母处中断
响应式下首行样式“跳来跳去”是设计行为，不是 bug
缩放窗口、字体加载延迟、font-size 动态变化、甚至 word-break: break-all 都会触发重排，浏览器按当前布局实时重算哪几个字符属于首行。所以：
- 别用媒体查询写死
p::first-line { font-weight: bold; }→ 它本就会随断点变化 - 中英文混排时因字体度量差异，断点偏移很常见；别依赖固定
letter-spacing: 0.1em适配所有设备 - 如果内容结构稳定（如小说每段固定 80 字），优先改用服务端注入或构建时预处理
<span>，绕开伪元素动态性
真正容易被忽略的是：首行判定完全依赖渲染结果，而非语义或字符计数；哪怕你写了 200 字，只要容器够宽，它仍是一行——这时候所有样式都只作用于那“一行”，而不是你预期的“开头部分”。
