::first-line 仅对块级容器中首行文本生效，失效主因是元素非块级、父容器破坏文本流、首行无文本或样式属性不被支持。
伪元素 ::first-line 不生效，大概率不是 CSS 写错了，而是它根本没被浏览器“看见”——这个伪元素只对**块级容器中的首行文本内容**生效，且受父容器显示类型、文本换行、内联上下文等多重限制。
为什么 ::first-line 看似写了却完全没反应
常见失效场景包括：
- 目标元素是
inline或inline-block（比如、），::first-line对非块级元素无效 - 父容器设置了
display: flex、display: grid或display: table，破坏了常规的块级文本流 - 首行实际为空（例如开头是
、或带margin-top的子块），导致“首行”无文本可选中 - 样式被更具体的规则覆盖，但开发者误以为是伪元素失效（可用浏览器 DevTools 的 “Computed” 面板确认是否命中）
确保容器是块级且参与正常文本流
必须让目标元素满足：块级显示 + 包含纯文本或内联文本节点。最稳妥做法是显式声明：
div.text-container {
display: block;
width: 100%;
}避免依赖默认行为，尤其在现代布局中：div 虽默认块级，但若其父级是 flex 容器，它可能被设为 align-self: stretch 并隐式影响内部行盒生成。必要时加 min-height: 1em 或 line-height: 1.5 确保有可渲染的行盒。
支持的样式属性非常有限
::first-line 只接受部分文本相关属性，其他一律忽略（不会报错，但不生效）：
- ✅ 支持：
color、font-*（如font-size、font-weight）、text-decoration、text-transform、letter-spacing、word-spacing、line-height - ❌ 不支持：
margin、padding、border、background、width、height、display、position
例如下面这段不会给首行加背景：
p::first-line {
background: yellow; /* 无效 */
color: red; /* 有效 */
}替代方案：当 ::first-line 确实不可用时
如果内容结构复杂（如首行为图标+文字、或使用了 float/grid 布局），直接用 ::first-line 就是徒劳。此时应改用语义化包裹：
这是第一行文字后续内容……
再配合 CSS：
.first-line {
font-weight: bold;
color: #2c3e50;
}注意：不要为了“首行”强行用 包裹所有可能换行的内容——它无法响应响应式断行变化；仅适用于内容固定、且明确知道哪部分会出现在首行的场景。
真正容易被忽略的是：伪元素生效的前提不是“你写了”，而是“浏览器能构造出一个符合规范的首行盒”。检查父容器的 display、文本是否被其他元素截断、以及 DevTools 中该伪元素是否出现在 Styles 面板里，比反复调样式优先级更关键。
