::first-line仅支持color、font-size等文本属性，因其作用于行内盒的渲染层，不参与盒模型构建；margin/padding/border需布局空间故不支持，background-image因依赖连续边界而常失效，line-height虽可调但仅影响该行盒高度。
为什么 ::first-line 只支持 color、font-size 这类属性
因为 ::first-line 不是“选中一段文字然后任意样式”，而是浏览器在布局阶段为**第一行内联盒（inline box）** 生成的一个虚拟渲染层，它只参与文本流的格式化，不参与盒模型构建。它的作用域被规范严格限定在「行内格式化上下文」内——换句话说，它只能影响文字怎么显示，不能影响它占多大地方、怎么摆放、怎么和其他元素互动。
-
color、font-size、letter-spacing等直接控制字符渲染，浏览器可在行盒生成时注入这些样式 -
margin、padding、border需要分配空间并影响布局流，但 ::first-line 没有独立盒模型，无法提供 margin-box 或 border-box -
background（简写）被禁用，是因为它可能触发 background-clip、background-origin 等依赖盒边界的行为；而background-color能生效，是因为它只需涂满当前行盒的内联区域，不依赖尺寸计算 -
line-height是个特例：它不改变字体大小，而是调整该行盒的高度，所以被允许；但它会影响后续行距，不是“只改首行看起来的样子”
::first-line 中 background-image 为什么常失效
根本原因在于 background-image 的绘制依赖于「背景定位区」，而 ::first-line 的渲染单元是分散的内联盒片段（比如首行里有多个 span，它们各自生成独立 inline box），这些片段未必连续、未必对齐、甚至可能跨行（如果用了 white-space: pre）。浏览器无法可靠地把一张图铺满这种非连续、无明确边界的空间。
- Safari 和旧版 Chrome 完全忽略
background-image声明，连 warning 都不抛 - Firefox 在某些断行场景下会尝试绘制，但图常被裁切或错位
- 即使看似生效，窗口 resize 或字体加载延迟后极易断裂——这不是 bug，是规范未要求支持
- 替代方案：
background-color稳定可用；若真需图案，得用box-decoration-break: clone+display: inline模拟，但兼容性和语义代价高
line-height 在 ::first-line 里为什么“看着怪”
line-height 在 ::first-line 中设了，但段落整体行距没变，或者第二行突然上移——这不是 bug，是你误解了它的作用对象。它控制的是「该行盒自身的高度」，不是「这段文字的行高基准」。
- 设
p::first-line { line-height: 2; }，只撑开第一行的行盒，后续行仍按 p 的原始line-height排布 - 若 p 原本
line-height: 1.5，首行被拉高后，第二行起始位置可能和第一行底部紧贴，造成视觉拥挤 - 更隐蔽的问题：当首行含
vertical-align: super的上标时，line-height会以该上标顶端为基准计算高度，导致实际撑开幅度远超预期 - 真正想统一控制行距？别动 ::first-line，直接设
p { line-height: 1.6; }，再用font-size或color微调首行即可
为什么 text-indent 不算 ::first-line 支持的属性
text-indent 看似和首行相关，但它作用对象是整个块容器，不是首行内容本身。它在块级格式化上下文（BFC）建立阶段就已计算完毕，::first-line 样式是在行盒生成后才叠加的，二者不在同一处理层级。
-
text-indent影响的是整段文字的起始偏移，::first-line 只能在此基础上修改该行内文字的渲染效果 - 你写
p::first-line { text-indent: 2em; }—— 浏览器会静默忽略，不报错也不生效 - 想让首行缩进更大？改
p { text-indent: 2em; }；想让首行文字比其他行更粗/更大，才用 ::first-line - 注意副作用：如果
text-indent设得过大（比如 5em），而容器宽度又窄，可能导致首行实际只显示一两个字，::first-line 样式就只套在这极少文字上，容易误判为“没生效”
复杂点在于：它不报错、不警告、DevTools 里也看不出声明被丢弃——你得靠排除法确认是不是属性本身就不被支持。最稳的做法，永远先查 MDN 的「CSS pseudo-elements」页面里 ::first-line 的 supported properties 表，而不是凭经验猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
