::first-letter可实现首字母大写效果，但仅对块级元素生效且要求首字符为字母或数字；常见失效原因包括首字符为空格、html标签、父容器display非block/inline-block，或Unicode标点兼容问题；需用Float:left实现首字下沉，现代浏览器均支持，内容不可控时需js辅助。
用 ::first-letter 实现首字母大写效果
直接给段落加 ::first-letter 伪元素就能控制首字母样式，但要注意它只对块级容器（如
、
）生效，且首字母必须是文本开头的字母或数字——中间有空格、换行、HTML 标签都会打断匹配。
::first-letter 的常见失效场景
很多情况下写了样式却没反应，基本逃不开这几个原因：
-
或::first-letter就找不到“首字母” - 父容器设置了
display: inline或display: flex，伪元素不触发 - 用了
font-variant: small-caps或其他字体特性，和font-size冲突导致视觉上不明显 - 在 firefox 中，如果首字母是 Unicode 标点（比如中文引号、破折号），部分版本不识别
基础写法与关键参数
最简可用样式长这样，注意几个易错点：
p::first-letter { font-size: 2em; font-weight: bold; float: left; line-height: 1; margin-right: 0.2em; }其中 float: left 是让大写字母“悬挂在段首”的关键；line-height: 1 防止它把整段行高撑开；margin-right 控制和后续文字间距。不加 float 的话，大写字母只是变大，不会形成传统“首字下沉”效果。
立即学习“前端免费学习笔记（深入）”；
兼容性与替代方案
::first-letter 在所有现代浏览器都支持，但 IE 只认单冒号 :first-letter（已淘汰，无需兼容）。真正麻烦的是内容不可控时——比如 cms 输出的
Hello world
，首字符其实是 标签，这时伪元素完全无效。遇到这种场景，得靠 JS 提前提取首字母包一层 ，再单独样式控制。