因为::first-letter只作用于块级格式化上下文（BFC）中的首个字符，而、默认是display: inline，不创建BFC，浏览器直接跳过伪元素渲染——不是bug，是CSS规范明确定义的行为。
为什么::first-letter对或完全没反应
因为::first-letter只作用于**块级格式化上下文（BFC）中的首个字符**，而<span></span>、<a></a>默认是display: inline，不创建BFC，浏览器直接跳过伪元素渲染——不是bug，是CSS规范明确定义的行为。
常见错误现象包括：写了p::first-letter但父p被设成display: inline；或把段落包在<span class="article"><p>...</p></span>里，结果::first-letter查的是span的首字符（通常是空格或换行），而非内部p的首字母。
- 必须确保目标元素本身是块级容器：
<p></p>、<div>、<code><h2></h2>等，默认display: block - 若用
<span></span>承载文本，得显式加display: block或display: inline-block -
display: flex或display: grid的父容器会破坏子元素的块级上下文，即使子元素是<p></p>，::first-letter也可能失效
inline元素里强行用::first-letter会发生什么
什么也不会发生——样式声明会被浏览器静默忽略，控制台无报错，DevTools里甚至看不到该伪元素节点。这不是兼容性问题，而是解析阶段就被排除了。
例如这段HTML：
立即学习“前端免费学习笔记（深入）”；
<span class="intro">Hello world</span>
配CSS：
.intro::first-letter { font-size: 2em; }
结果：首字母“H”毫无变化。因为.intro是inline，不满足伪元素触发前提。
如果你控制不了HTML结构（比如CMS输出固定为<span></span>），就别硬套::first-letter——改用JS提取首字符包裹<span class="drop-cap">H</span>再单独样式更可靠。
哪些display值能让::first-letter生效
只有能建立块级格式化上下文的display值才有效，包括：
-
block（如默认<p></p>） -
inline-block（常用于微调定位） -
table-cell（少用，但合法） -
list-item（如<li>）
以下值明确无效：
-
inline（原生<span></span>、<a></a>） -
flex、grid（容器自身不创建BFC，子元素伪元素失效） -
contents（伪元素根本无处挂载）
注意：inline-block虽带“inline”，但它会生成独立的块盒，所以::first-letter可用——这是少数能兼顾内联布局与首字样式的折中方案。
为什么float:left能“救活”部分失效场景
float: left本身不能让::first-letter在inline元素上生效，但它能间接暴露问题：一旦你给一个inline元素加float: left，它会自动变成块级框（block-level box），此时::first-letter才可能触发。
但这属于副作用，不可依赖。真实风险包括：
- 浮动导致父容器塌陷，需额外清浮
- 响应式断点下浮动行为不稳定
- 现代布局（Flex/Grid）与浮动混用易冲突
真正该做的，是回到HTML结构源头：确认目标元素是否在块级上下文中，而不是靠浮动“碰运气”。很多线上项目首字下沉失效，根子就在<p></p>被全局CSS重置成了display: inline，却没人检查。
