::first-line 伪元素仅继承父元素可继承属性且继承早于层叠，故易被父级样式覆盖；仅支持 color、font 等有限属性，禁用 layout 类属性；需注意 white-space、布局上下文等边界限制。
为什么 ::first-line 样式不生效
根本原因是 ::first-line 伪元素只继承父元素中「可继承的 CSS 属性」，且继承行为发生在伪元素生成时——如果父元素显式设置了 font-size、color、line-height 等，而子段落又没重置，就会看似“被覆盖”，实际是继承链压倒了伪元素规则优先级。
常见误判场景：p { color: #333; } p::first-line { color: red; } 在某些浏览器（尤其旧版 Safari）里可能无效，不是选择器写错，而是 ::first-line 的继承计算早于样式层叠，导致父级值已“固化”进伪元素上下文。
::first-line 只支持有限的 CSS 属性
它不是完整 DOM 元素，不能设置 display、margin、padding、width、height 等布局属性。一旦写了，整条声明会被浏览器静默忽略（不报错，但无效）。
- ✅ 支持：
color、font-family、font-size、font-weight、line-height、text-transform、letter-spacing、word-spacing - ❌ 不支持：
background-color（部分浏览器支持但不可靠）、border、text-indent（注意：它影响的是整行起始缩进，不是首行内文本）、float
例如：p::first-line { background: yellow; } 在 Firefox 中有效，在 Chrome 中可能仅高亮文字背景，Safari 则常完全不渲染——这不是 bug，是规范允许的实现差异。
立即学习“前端免费学习笔记（深入）”；
用 inherit 或 unset 主动控制继承源头
当父元素样式干扰严重时，不要指望靠提高 ::first-line 选择器权重硬刚，而应从继承源头切断或重置。
推荐做法：
- 给父容器加
all: unset;（慎用，会清空所有继承值，需后续补全必要样式） - 对关键属性显式设为
inherit：p { color: inherit; font-size: inherit; }，再在::first-line中覆盖 - 更稳妥：把文本包裹在
内，用类名控制首行，避开伪元素限制（适合内容可控的 CMS 场景）
示例修复：
p {
color: #666;
font-size: 16px;
}
p::first-line {
color: #2c3e50;
font-size: 18px;
font-weight: bold;
}
若无效，先检查父 p 是否被更高优先级规则（如 body p 或内联 style）锁死了 color 值；再确认是否用了不被支持的属性拖累整条规则。
兼容性与真·首行判定的边界情况
::first-line 的“首行”定义依赖排版流，以下情况会导致它不触发或行为异常：
- 父元素设置了
white-space: nowrap→ 整段变一行，但伪元素仍只作用于视觉首行（即容器宽度截断处），非逻辑首行 - 段落开头有
- 使用了
flex或grid布局的容器直接包含文本 →::first-line不生效（必须是块级流内文本） - Chrome 115+ 对
font-variation-settings等新属性支持仍不稳定，慎用于::first-line
真正难调试的，往往是伪元素和父级 line-height、vertical-align、font-metrics 的隐式交互——这时候别只盯着 CSS，打开 DevTools 的“Layout”面板看实际行框尺寸，比查文档更快定位问题。
