::first-letter 伪元素失效主因是首字母未被识别为文本流首字符，需确保其属于块级容器内首个纯文本节点，且父元素为块级上下文，避开浮动、替换元素及HTML结构干扰。
如果 ::first-letter 伪元素样式没生效，大概率是首字母没被浏览器识别为“可选中的文字首字符”——常见原因不是 CSS 写错了，而是 HTML 结构或渲染行为导致首字母根本不在文本流中。
确保首字母属于普通文本节点
::first-letter 只作用于**块级容器内第一个文字节点的首字符**。如果开头是 、、图标标签或空格/换行符，伪元素会失效。
- ✅ 正确：
欢迎来到首页
→ “欢”是首个纯文本字符，可生效 - ❌ 错误：
欢迎来到首页
立即学习“前端免费学习笔记（深入）”；
→ 首个子节点是元素，非文本节点，::first-letter不触发 - ⚠️ 注意：开头有空格、
欢迎...
，不要写成
欢迎...
父容器必须是块级上下文且可格式化
::first-letter 要求其父元素是块级框（display: block、table-cell、list-item 等），且不能是 inline 或 flex/grid 容器（除非该容器本身生成块框）。
- ✅ 有效：
文字
、文字 - ❌ 无效：文字（默认 inline）、文字（flex 容器不支持 ::first-letter）
- ? 补救：若需在 flex 项目中使用，把文字包一层 并设为
block，再对这个应用::first-letter避免与浮动、行内替换元素冲突
当首字母所在行存在浮动元素（如
float:left）或内联替换元素（如）时，部分浏览器可能跳过首字母渲染逻辑。- 检查是否意外设置了
float或position: absolute到首字符附近元素 - 确保首字符前没有
- 临时排查：给父元素加
border:1px solid red，确认首字符确实在可视文本流最前端
display: inline-block 不是万能解，但可辅助验证
单独设置
display: inline-block给::first-letter本身**不会修复不生效问题**，但它常被用来“强制创建独立渲染区域”，间接暴露结构问题：- ✅ 合理用法：p::first-letter { font-size: 2em; display: inline-block; margin-right: 0.2em; }
- ❌ 误区：以为加了
display: inline-block就能让伪元素出现 —— 实际它只在伪元素已存在时才起作用 - ? 建议：先用开发者工具检查 Elements 面板中是否出现
::first-letter的计算样式；若 Styles 面板里压根没该规则，说明选择器未命中，优先查结构和显示模式
- 检查是否意外设置了
