CSS伪元素::first-line如何实现段落首行加粗？

先说个让人抓狂的事实：::first-line这个伪元素，生效需要满足三个条件——目标得是块级元素、父容器不能破坏BFC、首行没有被内联元素打断；而且它只支持有限几个CSS属性，在响应式下首行范围还会动态变化。很多开发者兴冲冲写上去，结果样式纹丝不动，连控制台都不报错，简直让人摸不着头脑。

p::first-line 确实是唯一的标准方案，但直接写上就生效的前提非常具体——不满足任一条件，样式都会静默失效，连控制台都不报错。

p::first-line 失效的常见原因与排查方法

为什么 p::first-line 没反应？先查这三处硬伤

浏览器不是按 HTML 源码找“第一行”，而是按最终渲染出的 line box（行盒）来匹配。以下情况会让伪元素彻底失效：

• 目标元素不是块级：比如对 span 或 a 写 span::first-line —— 无效
• 父容器破坏了 BFC：把 p 套在 display: flex 或 display: grid 的 div 里，Safari 和旧 Chrome 直接跳过首行计算
• 首行被内联元素打断：开头有 、、零宽空格 u200b 或全角空格 u3000，行盒无法连续生成

::first-line 支持的CSS属性与常见误区

p::first-line 能用哪些 CSS 属性？别写白费劲的

它不是普通选择器，CSS 规范明确限制可用属性。超出范围的声明会被浏览器静默丢弃：

• 安全可用：font-weight、color、font-size、text-transform、letter-spacing、line-height
• 条件可用：background-color 在 Chrome/Firefox/Safari 16.4+ 稳定，旧 Safari 会忽略；background-image 或简写 background 在 Safari 中可能断裂
• 完全无效：margin、padding、border、width、height、display、position —— 写了等于没写

响应式布局中 ::first-line 的行为特征

响应式下首行加粗“漂移”是正常行为，不是 bug

窗口缩放、字体加载完成、甚至 font-size 动态变化，都会触发重排，p::first-line 会重新计算并应用样式。这意味着：

• 桌面端可能加粗前 50 字，移动端只剩前 12 字
• 一个超长英文单词换行，首行可能只剩一个字母——加粗和变色也只作用于那一个字母
• 如果需要“固定前 N 字加粗”，::first-line 不适用，得用 JS 截取字符串或服务端注入

::first-line 与 ::first-letter 的混用规则

和 ::first-letter 混用时的隐藏冲突

两者可以共存，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部。容易踩坑的是：

• p::first-letter { float: left; } 后，被浮动的字母脱离文本流，::first-line 只能选中它右边的剩余文字
• 若同时设 background-color，::first-letter 的背景会盖住 ::first-line 的背景
• 别在同一个选择器里反复覆盖，比如先写 p::first-line 再改 font-size，实际生效范围容易误判

真正难调试的点在于：首行判定完全依赖渲染结果，不是字符数、不是换行符、也不是你写的 HTML 结构——哪怕你删掉所有空格和标签，只要字体加载慢半拍，首行范围就可能偏移一两个像素。