::first-line 仅对块级容器中首行文本生效，失效主因是元素非块级、父容器破坏文本流、首行无文本或样式属性不被支持。
伪元素
不生效，大概率不是 CSS 写错了，而是它根本没被
浏览器
“看见”——这个伪元素只对**块级容器中的首行文本内容**生效，且受父容器显示类型、文本换行、内联上下文等多重限制。
为什么
看似写了却完全没反应
常见失效场景包括：
目标元素是
或
（比如
、
），
对非块级元素无效
父容器设置了
、
或
，破坏了常规的块级文本流
首行实际为空（例如开头是
、
、或带
的子块），导致“首行”无文本可选中
样式被更具体的规则覆盖，但开发者误以为是伪元素失效（可用浏览器 DevTools 的 “Computed” 面板确认是否命中）
确保容器是块级且参与正常文本流
必须让目标元素满足：块级显示 + 包含纯文本或内联文本节点。最稳妥做法是显式声明：
避免依赖默认行为，尤其在现代布局中：
虽默认块级，但若其父级是
容器，它可能被设为
并隐式影响内部行盒生成。必要时加
或
确保有可渲染的行盒。
立即学习
“
前端免费学习笔记（深入）
”；
支持的样式属性非常有限
只接受部分文本相关属性，其他一律忽略（不会报错，但不生效）：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
✅ 支持：
、
（如
、
）、
、
、
、
、
❌ 不支持：
、
、
、
、
、
、
、
例如下面这段不会给首行加背景：
替代方案：当
确实不可用时
如果内容结构复杂（如首行为图标+文字、或使用了
/
布局），直接用
就是徒劳。此时应改用语义化包裹：
再配合 CSS：
注意：不要为了“首行”强行用
包裹所有可能换行的内容——它无法响应响应式断行变化；仅适用于内容固定、且明确知道哪部分会出现在首行的场景。
真正容易被忽略的是：伪元素生效的前提不是“你写了”，而是“浏览器能构造出一个符合规范的首行盒”。检查父容器的
、文本是否被其他元素截断、以及 DevTools 中该伪元素是否出现在 Styles 面板里，比反复调样式优先级更关键。
::first-line::first-lineinlineinline-block::first-linedisplay: flexdisplay: griddisplay: table
margin-topdiv.text-container {
display: block;
width: 100%;
}divflexalign-self: stretchmin-height: 1emline-height: 1.5::first-linecolorfont-*font-sizefont-weighttext-decorationtext-transformletter-spacingword-spacingline-heightmarginpaddingborderbackgroundwidthheightdisplaypositionp::first-line {
background: yellow; /* 无效 */
color: red; /* 有效 */
}::first-linefloatgrid::first-line这是第一行文字后续内容……
.first-line {
font-weight: bold;
color: #2c3e50;
}display