CSS伪元素::first-line应用_打造报刊排版的首行效果

::first-line 常无效因仅作用于块级容器中纯文本或纯内联元素的首行，受 display 类型、子元素类型及 white-space 等属性限制；仅支持 color、font-size 等文本属性，不支持 margin、padding 等布局属性。

为什么 ::first-line 常常没效果？

因为它的样式作用范围极小，且受制于父元素的显示类型和内容结构。最常见的情况是：父元素用了 display: flex 或 display: grid，或者里面包裹了 <span></span>、<strong></strong> 这类内联子元素——这些都会打断首行的“连续文本流”，导致 ::first-line 完全不生效。

它只对块级容器（如 p、div 且 display: block）中**纯文本或纯内联元素组成的首行**起作用。一旦首行里有块级子元素（比如 <img alt="css伪元素::first-line应用_打造报刊排版的首行效果" >、<div>），或父元素被设为 <code>display: inline-block，样式就失效。

• 确保父元素是 display: block（默认 p 就满足）
• 避免在段落开头插入 <br>、<div> 或其他块级标签 <li>不要用 <code>white-space: pre-wrap 等会改变换行逻辑的属性，否则首行判定可能错位

::first-line 支持哪些 CSS 属性？

它只支持一部分文本相关属性，不是所有样式都能用。比如 color、font-size、font-weight、text-transform、letter-spacing 都可以；但 margin、padding、width、height、background（除 background-color 外）统统无效。

特别注意：background-image 在大多数浏览器里不支持，line-height 虽然能设，但实际表现不稳定——有些浏览器会应用，有些会忽略，别依赖它做精确控制。

立即学习“前端免费学习笔记（深入）”；

• 安全可用：color、font-family、font-style、text-decoration
• 谨慎使用：background-color（支持但可能覆盖不完整）、line-height（行为不一致）
• 明确不支持：margin、padding、border、transform、display

在真实报刊排版中怎么用才可靠？

真实场景里，::first-line 不是用来“加装饰”的，而是配合字体、字号、缩进做视觉锚点。比如中文报刊常见的“首字下沉”效果，不能单靠 ::first-line 实现——它无法单独选中第一个字，必须配合 ::first-letter 或手动加 <span class="dropcap"></span>。

更实际的做法是：用 ::first-line 统一控制首行缩进、字号微调、小写转大写等轻量样式，同时把复杂布局（如首字下沉+边框+浮动）交给结构化标记处理。

• 推荐组合：p::first-line { text-transform: uppercase; letter-spacing: 0.1em; }
• 避免组合：p::first-line { Float: left; width: 2em; }（float 不支持）
• 兼容性提醒：IE8+ 支持，但 safari 对含 ruby 标签的文本首行判定有偏差

容易被忽略的继承与层叠陷阱

::first-line 的样式优先级比普通元素高，但会被 !important 的内联样式或更高权重的选择器覆盖。更隐蔽的问题是：如果父元素设置了 font-size: 16px，而你在 ::first-line 里写 font-size: 1.2em，这个 em 是相对于父元素的，不是相对于首行自身——它没有独立的 font context。

另一个坑是伪元素不继承所有属性。比如父元素设了 color: #333，::first-line 默认会继承，但如果你在其中设了 color: inherit，反而可能触发意外的链式继承（尤其在 Shadow dom 或 Web Component 中）。

• 用 rem 或具体像素值比 em 更可控
• 避免在 ::first-line 中写 inherit，除非你明确追踪过整条继承链
• 调试时用浏览器开发者工具的“伪元素”开关确认是否真被选中，而不是只看样式面板有没有显示

事情说清了就结束。