::first-letter 失效主因是 DOM 或 CSS 环境不合规，如父元素 display: flex/grid、首字符被内联标签包裹、HTML 前有空白或注释；实现下沉需 float: left、line-height: 0.75、font-size ≥2.5em 协同。
::first-letter 不是写了就下沉，它有一套严格的触发条件，不满足就静默失效。
为什么 ::first-letter 样式写了却完全没反应
根本原因不是选择器写错，而是 DOM 结构或 CSS 环境不合规。常见失效场景包括：
- 父元素设了
display: flex或display: grid——这会切断文本流，::first-letter直接不触发 - 首字符被
<strong>、<em>等内联标签包裹，比如<p><strong>今</strong>天…</p> - HTML 中首字符前有换行、空格、注释或零宽字符：
<p>\n 今天…</p>或<p><!-- 注释 -->今天…</p> - 父元素设了
display: inline或display: inline-block（除非你明确需要该 display 值且确认上下文仍生成格式化上下文） - 用了
text-transform: uppercase后又想对原始字符样式化——::first-letter作用的是转换后的字符
真正让首字“沉下去”的三个必配样式
光改 font-size 只是变大，不是下沉。要实现文字自然环绕、视觉下沉，必须协同以下三者：
-
float: left：让首字脱离文档流，为右侧文字腾出绕排空间；缺了它，文字不会环绕 -
line-height: 0.75（无单位）：必须显式设置；继承父级行高会导致放大后整行被顶高；数值越小下沉感越强，但低于0.6可能截断字形 -
font-size: 2.8em：建议 ≥2.5em；中文可用clamp(2rem, 4vw, 3.5rem)响应式适配
别用 vertical-align 微调位置——在浮动上下文中不可靠；改用 margin-top 或 transform: translateY() 更可控。
立即学习“前端免费学习笔记（深入）”；
中文首字下沉的兼容性坑和实操红线
中文支持 ::first-letter，但浏览器对全角标点（如《、【、”）识别不一致，Safari 15.4 之前可能直接跳过。关键注意事项：
- 确保首字符是真实汉字，比如用
<p>今天天气很好</p>测试，别用占位符或富文本自动插入的空格/零宽字符 - 避免依赖字体自带“下沉”特性；细黑体放大后易发虚，加
font-weight: bold提升清晰度 - 父容器加
overflow: hidden是防止浮动溢出影响后续段落的最简方案 - iOS Safari 在 viewport 缩放后偶有重绘异常，可在
@media中关闭float，改用display: inline-block+vertical-align: top - 别指望
::first-letter稳定选中引号类字符——它会把《整个当首字母，放大后严重溢出；稳妥做法是手动加 class 排除
真正难的不是写对那几行 CSS，而是确认 DOM 结构干净、字体渲染稳定、移动端边界情况都被覆盖。
