p::first-line 失效主因是父容器或文本结构不满足块级上下文，仅支持color等文本属性，响应式下首行动态变化，与::first-letter共存时后者嵌套于前者内。
p::first-line 为什么没反应
最常见的原因不是你写错了选择器，而是父容器或文本结构不满足触发条件。浏览器只在块级上下文中生成行盒（line box），而 ::first-line 必须挂载在能形成行盒的元素上。
以下情况会导致静默失效：
- 目标
p套在display: flex或display: grid的父容器里——伪元素会直接被忽略 -
p被设为display: inline，或本身是span、a等内联元素 - 段落开头有不可见字符，比如
\u200B（零宽空格）或\u3000（中文全角空格），它们会提前“截断”行盒起始点 - 首行内嵌了
float元素、position: absolute文字，或inline-block子元素，破坏了内联格式化上下文（IFC）
::first-line 能用哪些 CSS 属性
它不是通用样式接管者，只接受影响「文本渲染结果」的属性。超出范围的声明会被浏览器静默丢弃，不报错也不生效。
安全可用（现代浏览器一致支持）：
-
color、font-size、font-weight、font-style -
text-transform、letter-spacing、line-height -
background-color（唯一可靠支持的 background 类属性）
明确禁用（写了也白写）：
-
margin、padding、border、width、height -
display（设成inline-block会让伪元素直接失效） -
background-image（Safari 和旧版 Firefox 常忽略，别依赖）
响应式下首行样式“跳变”是正常行为
::first-line 绑定的是「当前渲染后第一行的实际内容」，不是 HTML 源码里的前 N 个字符。窗口缩放、字体加载、word-break 变化都会导致首行覆盖范围实时重算。
这意味着：
- 桌面端首行可能是前 12 个汉字，手机屏下只剩前 4 个——样式自动 applied 到新首行
- 如果首行只剩一个词（如“然而”），加粗后显得突兀，建议用媒体查询降级：
@media (max-width: 480px) { p::first-line { font-weight: normal; } } - 中英文混排时因字体度量差异，断点可能偏移；避免靠字符数预期效果，改用语义化标记（如给首句包
<span class="lead"></span>）更可控
和 ::first-letter 共存时的层叠顺序
两者可以同时用，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部。它的样式会叠加在首行之上，而不是并列。
例如：
p::first-line { color: #666; }
p::first-letter { color: #222; font-size: 1.8em; }
结果是：首字母黑色放大，其余首行文字灰色——这是预期行为，不是冲突。
但要注意：
- 如果都设了
background-color，::first-letter的背景会盖住::first-line的背景 - 别在同一个选择器里反复覆盖，比如先设
p::first-line { font-size: 1.1em; }，再回头加p::first-letter { font-size: 2em; }，容易误判实际生效范围
真正难处理的不是语法，而是首行边界在不同设备、字体、缩放比下的动态性——它不像 text-indent 那样稳定，得接受这种“活”的排版逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
