p::first-line 首行高亮需满足块级容器、真实文本首行、仅用支持属性三条件；背景色易失效，安全高亮应组合 color、font-weight、text-transform 等属性，并注意响应式与 ::first-letter 层叠顺序及 js 更新后需强制重绘。
::first-line 能实现报刊式首行高亮，但必须满足块级容器 + 真实文本首行 + 仅用支持属性这三个硬条件，否则样式会静默失效。
为什么 p::first-line { background: yellow; } 经常不显示背景
根本不是浏览器 bug，而是 ::first-line 对 background 的支持非常脆弱：它只在“整行无换行、无浮动、无 inline-block 子元素、无不可见字符干扰”时才稳定渲染背景色。常见失效场景包括：
- 段落开头有
<span></span>或<em></em>包裹文字 → 首行被提前截断，伪元素失去作用目标 - 用了中文全角空格
\u3000或零宽空格\u200b→ 浏览器把它们算进首行，但渲染时不显示，导致背景“悬空” - 父容器设了
display: flex或display: inline→::first-line直接不触发 - 同时用了
::first-letter且设置了background→ 它会盖住::first-line的背景，因为层叠顺序更靠前
p::first-line 支持哪些属性能真正用于“高亮”
所谓“高亮”，不能只靠 background-color 单打独斗。安全且视觉有效的组合是：
-
color：改字体颜色（如深红#d63384），比背景更可靠 -
font-weight: bold：加粗提升视觉权重，对中英文都稳定 -
text-transform: uppercase或lowercase：统一大小写，增强版式控制感 -
letter-spacing: 0.05em：微调字距，避免首行拥挤，报刊常用手法 -
line-height: 1.4：略高于默认值，让首行呼吸感更强 -
background-color可用，但必须配合padding: 0 0.2em—— 注意：padding本身不被::first-line支持，所以得用background-clip: text+-webkit-text-fill-color: transparent曲线救国（仅限 WebKit）
响应式下首行范围动态变化带来的陷阱
同一段文字，在桌面端首行可能是“Lorem ipsum dolor sit amet”，到手机上只剩“Lorem”。这时你写的 p::first-line { background: #ffeb3b; } 会直接套在那个孤零零的单词上，显得突兀又廉价。
应对方式不是放弃，而是主动约束：
- 用媒体查询限制最小生效宽度：
@media (min-width: 768px) { p::first-line { ... } } - 对小屏降级处理：
@media (max-width: 480px) { p::first-line { font-size: inherit; color: inherit; background: none; } - 避免依赖绝对字符数；如果首句语义明确（如引言、定义句），不如手动加
<span class="lead-sentence"></span>，CSS 写.lead-sentence { ... }更可控
和 ::first-letter 混用时的实际渲染顺序
两者可以共存，但渲染层级固定：::first-letter 始终在 ::first-line 内部，就像一层透明罩子盖在首字母上。这意味着：
- 若同时设
color，::first-letter的颜色会覆盖::first-line的颜色（仅对首字母生效） - 若
::first-line设了background-color，而::first-letter也设了background-color，后者会完全遮住前者——哪怕你没给::first-letter加z-index - 想让首字母“透出”首行背景？不行。只能反过来：用
::first-letter控制首字，::first-line控制其余首行文字
最易被忽略的一点：JS 动态更新段落内容后，::first-line 不会重算——它基于初始 DOM 快照。Vue/React 中文本变化后，需要强制重绘（比如临时 toggle 一个 class）才能刷新首行样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
