最常见原因是目标元素不是块级上下文，::first-letter仅对块级容器（如）、table-cell或inline-block元素生效，对纯等inline元素默认无效；首字符前存在空白符、注释或内联标签也会导致失效。
为什么 ::first-letter 有时完全不生效
最常见原因是目标元素不是块级上下文（block formatting context）——::first-letter 只对块级容器（如 <p></p>、<div>、<code><h1></h1>）或 table-cell/inline-block 元素生效，对纯 <span></span> 或 <a></a> 这类 inline 元素默认无效。
另一个高频陷阱是：首字符前存在空白符（空格、换行、制表符）或注释。浏览器会跳过这些，但若它们“物理上”出现在文本开头，::first-letter 就可能选中第二个可见字符，甚至失效。
- 确保目标元素 display 值为
block、inline-block、table-cell或list-item - HTML 中首字母前不要换行或空格，写成
<p>Hello</p>而非<p>\n Hello</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> - 避免在首字母前插入
<!-- comment -->或<span></span>等不可见节点
::first-letter 支持哪些 CSS 属性
它只接受有限的样式声明，超出范围的会被忽略。比如 color、font-size、font-weight、line-height、float、text-decoration 都合法；但 margin、padding、border（除 border-color 外多数不支持）、display（不能设为 flex 或 grid）基本无效。
特别注意：float: left 是实现「首字下沉」的关键，但必须配合足够大的 font-size 和合适的 line-height，否则文字会重叠或错位。
- 推荐组合：
font-size: 3em+line-height: 0.8+float: left+margin-right: 0.2em -
vertical-align在某些场景下可微调基线对齐，但兼容性较弱（尤其 Safari） - 不要尝试用
transform模拟下沉——它不改变文档流，易导致后续文字覆盖
中文、标点、数字开头时 ::first-letter 怎么处理
规范定义 ::first-letter 选取的是“第一个格式化字符”，对中文即首个汉字，对英文即首个字母，但对以下情况行为不一：
- 以标点开头（如
“你好”）：多数浏览器选中“，而非你；Chrome 和 Firefox 一致，Safari 有时会跳过引号 - 以数字开头（如
123abc）：选中1，没问题 - 以 emoji 开头（如
?Hello）：现代浏览器通常能正确选中 emoji，但旧版 Safari 可能忽略或报错 - 混合中英文（如
测试Test）：选中「测」，不是「T」
如果必须控制非字母开头的样式，更可靠的方式是手动包裹首字符：<p><span class="dropcap">“</span>你好世界</p>，再对 .dropcap 单独设置样式。
IE 和旧版 Safari 的兼容性坑
IE8+ 支持 ::first-letter，但只认单冒号写法 :first-letter；而现代标准要求双冒号 ::first-letter。同时使用两者可覆盖：
h2:first-letter,
h2::first-letter {
font-size: 2.5em;
float: left;
}Safari 12 之前对 line-height 在 ::first-letter 中的支持异常：设为无单位数值（如 1.2）可能被忽略，建议显式写 line-height: 1.2em 或 line-height: 120%。
真正麻烦的是：当父元素有 overflow: hidden 且首字母浮动时，部分旧 Safari 版本会裁剪掉浮出区域的首字母——这时要么去掉 overflow，要么改用绝对定位模拟浮动效果。
首字母样式看似简单，但跨浏览器渲染差异、DOM 结构敏感性和属性限制加在一起，实际落地时比想象中更容易漏掉一个空格或写错一个冒号。
