::first-letter没反应根本不是选择器错误，而是HTML结构或CSS环境不满足严格触发条件：父元素需为块级容器且不能是flex/grid，首字符前不能有空白或内联标签包裹，中文段落需避开全角标点开头；实现下沉必须同时设置float:left、line-height:0.75和font-size≥2.8em，并用overflow:hidden清除浮动。
为什么::first-letter写了却没反应
根本不是选择器写错了，而是 HTML 结构或 CSS 环境不满足触发条件。浏览器对 ::first-letter 的生效要求非常严格：
• 父元素必须是块级容器（如 <p>），若父层用了 display: flex 或 display: grid，伪元素直接静默失效
• 首字符前不能有任何空白：换行、空格、HTML 注释（如 <p>\n 今天…</p> 或 <p><!-- 注释 -->今天…</p>）都会让伪元素跳过
• 首字符不能被 <strong>、<span> 等内联标签包裹——哪怕只包一个字，它就不再是“文本流顶层的第一个字符”
• 中文段落以《、【、“开头时，::first-letter 会选中标点而非汉字，结果放大一个引号，严重溢出
p::first-letter必须配齐的三个关键样式
光写 font-size: 3em 只会让首字变大，不会“下沉”。真正实现文字环绕、视觉下沉，必须同时设置：
• float: left：唯一能触发右侧文字自然绕排的属性，缺了它就只是放大
• line-height: 0.75（无单位数值）：必须显式覆盖继承值；否则放大后行框高度剧增，把整行顶高，第二行文字会被压在首字下方
• font-size: clamp(2rem, 4vw, 3.5rem) 或至少 2.8em：固定值低于 2.5em 在多数中文字体下视觉无下沉感
另外推荐给父 <p> 加 overflow: hidden 清除浮动，比 clear: both 更轻量，且避免后续段落上移重叠
中文场景下容易踩的字体与标点坑
中文不是“自动适配”，几个细节常被忽略：
• 某些中文字体（如手写体、圆体）字宽不均、上下伸展夸张，单纯放大易撑破行框或底部截断；建议显式指定稳定字体：font-family: "PingFang SC", "Hiragino Sans GB", sans-serif
• 全角标点识别不稳定：Safari 15.4 之前版本对《、【、”等开头的段落可能直接跳过 ::first-letter，上线前务必用真实 CMS 数据验证
• margin-right 推荐用 0.15em–0.25em，太小挤占正文，太大像断开；别用 margin-top 微调位置——在浮动上下文中易触发新 BFC 导致偏移，改用 transform: translateY(-0.1em) 更可控
• 响应式慎用 em：嵌套缩放下易失准，vmin 或 clamp() 更稳
Flex/Grid 布局里::first-letter失效怎么办
这不是兼容性问题，是 CSS 规范定义的行为：一旦父容器设了 display: flex 或 display: grid，子元素的文本流被切断，::first-letter 就不再生成盒模型。
• 不要试图用 grid-area 或 align-self 给伪元素定位——它在 Flex/Grid 中没有布局能力
• 解法只有两个：
– 把需要首字下沉的 <p> 移出 Flex/Grid 容器，放在外部独立块级上下文中
– 放弃伪元素，手动用 <span class="dropcap">今</span> 包裹首字，再用常规 CSS 控制（此时可自由用 display: inline-block、vertical-align 等）
后者虽然多一个标签，但在现代组件化开发中反而更可控、易调试
立即学习“前端免费学习笔记（深入）”；
