p::first-line加粗首行需满足三条件：目标为块级元素、父容器不破坏bfc、首行无内联元素打断；仅支持font-weight等有限文本属性，响应式下首行范围动态重算。
::first-line 能加粗首行，但不是写上就生效——它只对渲染后的视觉第一行起作用，且有三处硬性限制，任一不满足，样式就静默失效。
为什么 p::first-line { font-weight: bold; } 没反应？先查这三处
浏览器不按 HTML 源码找“第一行”，而是按最终生成的 line box（行盒）匹配。以下情况会让伪元素彻底不触发：
- 目标元素不是块级：比如对
span或a写span::first-line—— 无效 - 父容器破坏了 BFC：把
p套在display: flex或display: grid的div里，Safari 和旧 Chrome 直接跳过首行计算 - 首行被内联元素打断：开头有
<img>、<span></span>、零宽空格\u200b或全角空格\u3000，行盒无法连续生成
哪些 CSS 属性真正能用？别写白费劲的
::first-line 不是普通选择器，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—— 写了等于没写
响应式下加粗范围“漂移”是正常行为，不是 bug
窗口缩放、字体加载完成、甚至 font-size 动态变化，都会触发重排，::first-line 会重新计算并应用样式。这意味着：
- 桌面端可能加粗前 50 字，移动端只剩前 12 字
- 一个超长英文单词换行，首行可能只剩一个字母——加粗也只作用于那一个字母
- 如果你需要“固定前 N 字加粗”，
::first-line不适用，得用 JS 截取字符串或服务端注入
和 ::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 结构——哪怕你删掉所有空格和标签，只要字体加载慢半拍，首行范围就可能偏移一两个像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
