::first-letter和::first-line失效主因是HTML结构与布局环境不兼容：父元素为flex/grid、首字符前有空白/注释/内联标签、或以全角标点开头均会导致静默失效；实现首字下沉需float+line-height+overflow协同；二者可共存但::first-letter在::first-line内部，禁止嵌套写法；::first-line响应视口变化但不响应JS内容更新。
为什么写了::first-letter和::first-line却像没写一样
不是选择器写错了，而是浏览器直接跳过渲染——这两个伪元素对 HTML 结构和布局环境极其敏感，稍有偏差就静默失效。
- 父
<p>被套在display: flex或display: grid容器里 → 文本流中断，伪元素无行盒可依 - 段落开头有换行、空格、
<!-- 注释 -->，或零宽字符（如\u200b）→ 实际选中的“首字符”可能是空格或标点 - 首字被
<strong>、<em>等标签包裹 →::first-letter只认纯文本节点，不穿透内联元素 - 段落以《、【、“等全角标点开头 →
::first-letter选中的是引号，不是汉字，放大后溢出难看
::first-letter 实现首字下沉必须配齐的三要素
只写 font-size: 3em 不会“沉”，只会把第一行顶高；真正下沉是视觉上让首字向下嵌入，靠的是浮动 + 行高压缩 + 清除浮动三者协同。
-
float: left：让首字脱离文档流，文字绕排 -
line-height: 0.75（无单位）：压低首字自身行框高度，否则它像一块竖砖立着，文字从头顶绕 -
overflow: hidden加在父<p>上：清除浮动，防止段落高度塌陷，后续段落上移重叠
中文建议从 line-height: 0.75 起试；低于 0.6 可能截断字形顶部；思源宋体等 ascender 偏高的字体，可加 margin-bottom: -0.2em 微调，慎用 margin-top（可能触发新 BFC）。
::first-line 和 ::first-letter 共存时的层叠与样式冲突
它们可以同时用，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 若都设了
color，::first-letter的声明优先级更高（同权重下后写的覆盖先写的） - 若都设了
background-color，::first-letter的背景会盖住::first-line的背景 - 不能写
p::first-line::first-letter—— CSS 规范禁止嵌套伪元素，整条规则会被浏览器忽略
典型安全组合示例：p::first-letter { font-size: 3em; float: left; line-height: 0.75; margin-right: 0.2em; }p::first-line { font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
响应式下首行范围动态变化，但样式不会“迁移”
::first-line 匹配的是当前视口宽度下「实际渲染的第一行文本」，不是 HTML 源码前几个字符。窗口缩放、字体加载延迟、甚至 word-break: break-all 都会让它覆盖的字数实时变化。
- 桌面端首行显示 8 个汉字，手机屏变 4 个 → 样式自动 applied 到新首行，这是设计本意
- 但 JS 动态更新段落内容（如
innerHTML = ...）后，::first-line不会重算 → 仍按旧文本宽度和换行点生效 - 想强制刷新？可临时 toggle 一个无关 class，或改个
font-size触发重排，但别滥用
复杂点不在样式本身，而在首字符的“真实性”——它必须是 DOM 文本流中第一个可渲染的汉字，且前面没有任何干扰结构。CMS 输出或富文本编辑器插入的内容，上线前务必检查真实 DOM，不能只测“今天天气好”这种理想 case。
