p::first-line生效需满足三条件：目标为块级元素、父容器不破坏bfc、首行无内联元素打断；仅支持color、font-weight等文本属性，响应式下首行范围动态重算。
p::first-line 能生效，前提是它真能“看到”首行——不是你写的 HTML 里第一行，而是浏览器 layout 后实际生成的 line box。不满足条件时，样式静默失效，控制台不报错，连调试都无从下手。
为什么 p::first-line 样式完全没反应
根本问题往往不在 CSS 写法，而在渲染上下文被破坏：
- 父容器用了
display: flex或display: grid→ 浏览器跳过行盒计算，伪元素直接不挂载 - 目标元素本身是
span、a或显式设了display: inline→ 它不形成块级格式化上下文（BFC），没有“首行”概念 - 段落开头有
\u200b（零宽空格）或\u3000（全角空格）→ 行盒起始点被干扰，首行判定失败 - 首行内嵌了
img、inline-block元素或浮动内容 → 破坏内联格式化上下文（IFC），导致首行不可见
p::first-line 支持哪些 CSS 属性
它只接受影响「文本渲染结果」的属性，超出范围的声明会被浏览器静默丢弃：
- ✅ 安全可用：
color、font-size、font-weight、font-style、text-transform、letter-spacing、line-height - ⚠️ 条件可用：
background-color在 Chrome/Firefox/Safari 16.4+ 稳定；background-image在 Safari 和旧 Firefox 中常被忽略，别依赖 - ❌ 完全无效：
margin、padding、border、width、height、display、position—— 写了等于没写
响应式下首行样式“漂移”是设计行为，不是 bug
p::first-line 绑定的是当前视口下的真实首行，不是固定字符数。窗口缩放、字体加载延迟、word-break 变化都会触发重排，首行覆盖范围实时重算：
- 桌面端可能加粗前 60 字，手机屏缩成前 15 字，样式自动 applied 到新首行
- 一个长英文单词在窄屏换行，首行只剩 “T” ——
font-weight: bold就只作用于那个字母 - 若需“固定前 N 字加粗”，
::first-line不适用，得用 JS 截取或服务端注入span
和 ::first-letter 混用时的嵌套陷阱
两者可共存，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部：
- 若
p::first-letter { float: left; }，浮动后字母脱离文本流，::first-line只能选中它右侧剩余文字 - 同时设
background-color时，::first-letter的背景会盖住::first-line的背景，视觉上后者“消失” - 别在同一个选择器里反复覆盖字体大小，实际生效范围容易误判——因为首行判定完全依赖最终渲染，不是源码结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
