::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等会改变换行逻辑的属性，否则首行判定可能错位 - 安全可用：
color、font-family、font-style、text-decoration - 谨慎使用：
background-color（支持但可能覆盖不完整）、line-height（行为不一致） - 明确不支持：
margin、padding、border、transform、display - 推荐组合：
p::first-line { text-transform: uppercase; letter-spacing: 0.1em; } - 避免组合：
p::first-line { float: left; width: 2em; }（float不支持） - 兼容性提醒：IE8+ 支持，但 Safari 对含
ruby标签的文本首行判定有偏差 - 用
rem或具体像素值比em更可控 - 避免在
::first-line中写inherit，除非你明确追踪过整条继承链 - 调试时用浏览器开发者工具的“伪元素”开关确认是否真被选中，而不是只看样式面板有没有显示
::first-line 支持哪些 CSS 属性？
它只支持一部分文本相关属性，不是所有样式都能用。比如 color、font-size、font-weight、text-transform、letter-spacing 都可以；但 margin、padding、width、height、background（除 background-color 外）统统无效。
特别注意：background-image 在大多数浏览器里不支持，line-height 虽然能设，但实际表现不稳定——有些浏览器会应用，有些会忽略，别依赖它做精确控制。
立即学习“前端免费学习笔记（深入）”；
在真实报刊排版中怎么用才可靠？
真实场景里，::first-line 不是用来“加装饰”的，而是配合字体、字号、缩进做视觉锚点。比如中文报刊常见的“首字下沉”效果，不能单靠 ::first-line 实现——它无法单独选中第一个字，必须配合 ::first-letter 或手动加 <span class="dropcap"></span>。
更实际的做法是：用 ::first-line 统一控制首行缩进、字号微调、小写转大写等轻量样式，同时把复杂布局（如首字下沉+边框+浮动）交给结构化标记处理。
容易被忽略的继承与层叠陷阱
::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 中）。
