::first-letter仅对块级元素生效，不支持行内元素及中文首字；可用样式限于font、color、margin等，不可用text-transform、width等；实现首字下沉需配合float。
为什么::first-letter有时不生效
常见原因是目标元素不是块级或行内块级容器，比如直接用在 <span> 或 <a> 上且未设置 display: block 或 display: inline-block。CSS 规范要求 ::first-letter 只对“生成块级盒的元素”生效（如 <p>、<div>、<h1>），否则会被浏览器忽略。
实操建议：
- 确保父元素是块级容器；若必须作用于行内元素，先加
display: inline-block - 避免在
float或position: absolute元素上依赖它——部分旧版浏览器支持不稳定 - 注意标点符号：如果段首是中文、空格、引号或破折号，
::first-letter可能选中的是那个符号而非字母，导致“大写”无视觉变化
::first-letter能设置哪些样式
它只支持有限的 CSS 属性，超出范围的声明会被静默丢弃。重点不是“能不能写”，而是“写了有没有用”。
可用属性包括：
立即学习“前端免费学习笔记（深入）”；
-
font-*系列（font-size、font-weight、font-family） -
color、background、text-decoration -
margin（仅左右）、padding（仅左右）、border -
line-height（仅当元素为块级且有行高时影响首行布局）
不能用：width、height、transform、display、text-transform（这个尤其容易踩坑——text-transform: uppercase 对 ::first-letter 无效）
想让英文首字母真正“变大+下沉”，得配合float
纯靠 font-size 放大首字母会导致后续文字上移、行高错乱。标准做法是结合 float: left 实现经典“首字下沉”效果。
示例代码：
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 0.8;
margin-right: 0.2em;
}
关键点：
-
float: left让首字母脱离文本流，后续文字自动环绕 -
line-height: 0.8控制首字母自身行高，避免撑高整段；值太小会切割字形，建议 0.7–0.9 之间试 -
margin-right补足字母与后续文字间距，否则可能紧贴 - 不要设
height或vertical-align——它们对::first-letter无效或引发兼容问题
中文首字大写？别指望::first-letter
::first-letter 在中文场景下基本不可靠：它不识别“汉字是否为首字”，也不触发 text-transform；更麻烦的是，不同浏览器对中文字符的“首字母”判定不一致（有的认第一个 Unicode 字符，有的跳过标点后找首个非空白字符）。
真实可行方案只有两个：
- 服务端/构建时预处理：在 HTML 中手动给首字包一层
<span class="first-char">你</span>，再用普通 CSS 控制 - 前端 JS 动态注入：
element.innerHTML = element.innerHTML.replace(/^(.)/, '<span class="first-char">$1</span>');，注意避开已有标签和空格
用 ::first-letter 强行套中文，大概率在 Safari 或某些安卓 WebView 里失效，且无法 fallback。
