::first-line伪元素失效通常因父元素非块级、无实际文本、样式被覆盖或使用了不支持的CSS属性。它仅作用于块级容器的首行可视文本，不支持margin等布局属性，且受浏览器兼容性限制。
如果 ::first-line 伪元素没有生效，通常不是语法写错，而是受 CSS 层叠规则、HTML 结构或元素类型限制所致。它只对块级容器（如 p、div、h1 等）生效，且仅作用于**视觉上的首行文本内容**，不适用于内联元素或空/换行开头的段落。
确保父元素是块级容器且有可渲染文本
::first-line 只能附加在块级元素上，不能用在 span、a 或其他内联元素上。同时，目标元素必须包含实际文字内容（不能是纯空格、换行或被 display: none 隐藏）。
- ✅ 正确：
<p>这是一段文字，首行会变大加粗。</p> - ❌ 无效：
<span>首行样式不会应用</span>（span是内联元素） - ❌ 无效：
<p><br>首行其实是空行</p>（首行无字符，伪元素无内容可选中）
检查样式是否被更高优先级规则覆盖
::first-line 的样式优先级等同于普通类选择器，但低于带 !important 的声明或更具体的选择器。若你写了 p::first-line { font-size: 1.2em; } 却没效果，可能是：
- 父元素设置了
font-size且未被继承（::first-line默认继承多数文本属性，但某些自定义字体或重置 CSS 会干扰） - 全局 CSS 框架（如 Bootstrap）已用更强选择器覆盖了
::first-line - 使用了
all: unset或all: revert在父元素上，清除了继承行为
注意兼容性与不可继承属性限制
::first-line 支持的样式有限，仅限部分文本相关属性，比如：
立即学习“前端免费学习笔记（深入）”；
- ✅ 允许：
color、font-*、text-decoration、line-height、letter-spacing、word-spacing - ❌ 不允许：
margin、padding、width、height、background（部分浏览器支持background-color，但非标准）、border
例如，p::first-line { background: yellow; } 在 Chrome/Firefox 中可能显示，在 Safari 中可能被忽略——这不是 bug，而是规范本就不保证所有背景类属性生效。
避免常见结构陷阱：浮动、Flex/Grid 容器中的失效
当段落处于 display: flex 或 display: grid 的容器中，且自身被设为 align-self: start 或参与对齐时，::first-line 仍有效；但若段落被包裹在 float: left 的元素里，或其父容器用了 contain: layout，可能导致首行计算异常。
- 建议：先移除浮动、布局隔离等干扰项，确认
::first-line基础可用后再逐步加回样式 - 调试技巧：临时加
outline: 1px solid red到p::first-line，看是否真无渲染（有时只是颜色/大小变化不明显）
