::first-line仅对块级元素渲染后的首行文本生效，支持color、font-weight等文本属性，禁用margin等布局属性；失效主因是父容器为flex/grid、首行含不可见字符或内联元素打断，且响应式下首行范围动态重算。
::first-line 不是“给前几个字加样式”的工具，它只对块级元素渲染出的第一行文本生效，且仅支持有限的文本属性；写错选择器或误用布局属性，样式会静默失效，连 DevTools 都不报错。
为什么 ::first-line 写了却完全没反应
浏览器不是按 HTML 源码找“第一行”，而是等布局完成、行盒（line box）生成后，才匹配真实渲染的第一行。以下情况会让伪元素彻底跳过：
-
p被套在display: flex或display: grid的父容器里 —— flex/grid 容器不生成传统行盒，::first-line直接被忽略 - 段落开头有不可见字符，比如
\u200B（零宽空格）或\u3000（全角空格），它们会提前截断行盒起始点 - 首行内嵌了
float元素、position: absolute文字，或display: inline-block子元素 —— 破坏内联格式化上下文（IFC） - 目标元素本身不是块级，例如对
span或a使用span::first-line—— 无效，哪怕加了display: block也不保证兼容
p::first-line 能用哪些 CSS 属性，哪些写了等于白写
规范明确限制可用属性，超出范围的声明会被浏览器静默丢弃（不报错、不警告、不生效）：
-
✅ 安全可用（现代浏览器一致支持）：
color、font-weight、font-size、text-transform、letter-spacing、line-height、background-color -
⚠️ 条件可用（慎用）：
background-image在 Safari 和旧 Firefox 中大概率失效；text-decoration可用，但若和::first-letter共存，可能被覆盖 -
❌ 明确禁用（写了也白写）：
margin、padding、border、width、height、display、text-indent—— 这些属于布局控制，::first-line不接管
响应式下 ::first-line 样式“跳变”是设计使然，不是 bug
首行范围不是静态的：它随视口宽度、字体加载、font-size 缩放、甚至中英文混排的字体度量差异实时重算。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 桌面端首行可能是“人工智能正在改变”，手机屏下缩成“人工智能正”，样式自动 applied 到新首行
- 一个超长英文单词（如
antidisestablishmentarianism）换行后，首行只剩前缀anti-，加粗和变色也只作用于这五个字母 - 若需小屏降级（比如避免单字高亮突兀），必须用媒体查询显式控制：
@media (max-width: 480px) { p::first-line { font-weight: normal; } }
列表项 li::first-line 和标题 h2::first-line 的特殊注意事项
列表和标题最容易踩坑，因为结构常被现代布局干扰：
-
ul::first-line或ol::first-line几乎总是无效 —— 列表本身不包含可渲染文本，li才是内容载体；应改用li::first-line -
h2::first-line失效，大概率因父容器是flex或grid；需确保h2自身是块级（显式加display: block），且父级未设font-size: 0或line-height: 0 -
li若设为display: inline或被float干扰，其内部文本无法形成稳定行盒，li::first-line也会失效 - 避免在
li内使用white-space: nowrap—— 整条内容压成一行，::first-line就等于整行，失去“首行”意义
真正难调试的地方在于：首行判定完全依赖最终渲染结果，不是字符数、不是换行符、也不是你写的 HTML 结构 —— 字体加载慢半拍，首行范围就可能偏移一两个像素。
