::first-letter对中文段落常失效，因规范限定其仅匹配ASCII字母、数字或标点，汉字不属该范畴；需插入零宽空格（U+200B）并重置伪元素样式方可生效。
直接用 ::first-letter 就行，但浏览器对中文首字的支持有隐性限制——它只识别「段落开头的 ASCII 字母、数字或标点」为可选首字符，纯中文段落默认不触发，必须配合特定 HTML 结构和 CSS 修正。
为什么 ::first-letter 对中文段落经常失效
根本原因是规范定义：::first-letter 选取的是「第一个格式化字符之后的第一个字母、数字或标点符号」。中文汉字不属于该范畴，所以当段落以汉字开头（如 <p>今天天气很好</p>），大多数浏览器（Chrome/Firefox/Safari）会跳过整个选择器，样式不生效。
常见错误现象：
- 样式写对了，但首字完全没变化
- 开发者工具里能看到 ::first-letter 被标记为 “inactive” 或 “not matched”
- 换成英文开头（<p>Today is nice</p>）立刻生效
- 必须确保目标元素是块级容器（如
<p></p>、<div>），且内部无前置 inline 元素（比如 <code><span></span>、<em></em>） - 不能嵌套在
display: inline的父元素中，否则伪元素无法生成 -
float、line-height、font-size等属性必须显式设置，否则部分浏览器渲染异常
让中文首字被 ::first-letter 识别的实操方法
核心思路：在中文文字前插入一个“视觉不可见但语义合法”的 ASCII 字符，诱导浏览器把后续汉字当作“首个字母之后的第一个字符”。最稳定的做法是用零宽空格 （U+200B）：
立即学习“前端免费学习笔记（深入）”；
<p>​今天天气很好</p>
然后配合以下 CSS：
/* 必须重置零宽空格的 display，否则它会占据行高 */
p::before {
content: "";
display: inline;
}
p::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
margin-right: 0.1em;
}- 不用
- 不要用
<span></span>包首字再手动设样式，那不是::first-letter，也不响应段落重排 - 如果内容来自 CMS 或用户输入，需后端或 JS 在入库/渲染前自动注入
::first-letter 的兼容性与性能注意点
IE 完全不支持 ::first-letter（仅支持旧版 :first-letter 单冒号写法），而现代浏览器虽支持，但对中文仍存在差异：
- Chrome 115+ 和 Safari 16.4+ 已开始实验性支持纯中文首字，但需开启
chrome://flags/#enable-experimental-web-platform-features，不可用于生产 - Firefox 始终要求 ASCII 前缀，哪怕加了
，也建议加font-variant-caps: small-caps等兜底属性防降级 - 每个
::first-letter都会触发额外的文本布局计算，含大量段落时（如文章页）可能轻微影响首屏渲染速度
真正麻烦的不是怎么写，而是得时刻记住：这个伪元素本质是为拉丁文设计的，中文只是借道而行——一旦 DOM 结构微调（比如加了个 text-indent 或用了 contain: layout），首字就可能突然消失。
