::first-letter 无效的常见原因包括：父容器为 flex/grid、首字符前有空白或注释、被内联标签包裹、以全角标点开头；实现下沉需同时设置 float: left、line-height: 0.75 和足够大的 font-size，并在父容器加 overflow: hidden 清除浮动；中文段落需插入零宽空格才能触发匹配。
为什么写了 ::first-letter 却完全没反应
浏览器不是报错，而是静默忽略——::first-letter 在 DevTools 里能看到规则，但 computed 样式为空。常见原因有：
- 父容器用了
display: flex或display: grid：文本流被切断，伪元素不触发 - HTML 中首字符前有换行、空格、
<!-- 注释 -->或零宽字符（如富文本编辑器插入的） - 首字被
<strong>、<em>等内联标签包裹：<p><strong>今</strong>天</p> - 段落以《、【、“、」等全角标点开头：伪元素选中的是标点而非汉字，结果引号被放大三倍溢出
::first-letter 真正下沉必须配齐的三个样式
只写 font-size: 3em 不会下沉，只会撑高整行、顶开第二行文字。要实现视觉“沉入”，三者缺一不可：
-
float: left：唯一能触发文字环绕的属性；不加它，后续文字始终从首字右侧平齐开始排 -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字像竖砖立着，文字只能从它“头顶”绕 -
font-size: clamp(2rem, 4vw, 3.5rem)或至少2.5em：中文场景下2em视觉上基本看不出下沉感
父容器必须加 overflow: hidden 清除浮动
不处理浮动，<p> 高度会塌陷，后续段落会上移重叠：
-
overflow: hidden是最轻量、兼容性最好的清除方式 - 别用
clear: both：需额外 DOM 节点，破坏语义 - 慎用
display: flow-root：Safari 15.4 之前不支持 - 如果父容器本身是
flex或grid，加清除也没用——::first-letter已失效，得把段落移出该容器
中文首字不生效？可能是浏览器根本没识别汉字为“首字母”
CSS 规范定义 ::first-letter 默认匹配 ASCII 字母、数字或标点；纯中文段落（如 <p>今天</p>）在 Chrome/Firefox/Safari 中常被跳过：
立即学习“前端免费学习笔记（深入）”；
- 实操方案：在首字前插入零宽空格
，再用p::first-letter选中后续汉字 - 同时需重置
p::before { content: ""; display: inline; }，避免零宽空格影响行高 - 不要用普通空格或
- CMS 或用户输入若以《开头，前端必须预处理，例如用正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除开头标点
