::first-letter可实现首字母大写效果，但仅对块级元素生效且要求首字符为字母或数字；常见失效原因包括首字符为空格、HTML标签、父容器display非block/inline-block，或Unicode标点兼容问题；需用float:left实现首字下沉，现代浏览器均支持，内容不可控时需JS辅助。
用 ::first-letter 实现首字母大写效果
直接给段落加 ::first-letter 伪元素就能控制首字母样式，但要注意它只对块级容器（如 <p>、<div>）生效，且首字母必须是文本开头的字母或数字——中间有空格、换行、HTML 标签都会打断匹配。
::first-letter 的常见失效场景
很多情况下写了样式却没反应，基本逃不开这几个原因：
-
<p>里第一个字符是空格、<span>或<br>，::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 输出的 <p><strong>Hello</strong> world</p>，首字符其实是 <strong> 标签，这时伪元素完全无效。遇到这种场景，得靠 JS 提前提取首字母包一层 <span class="dropcap">，再单独样式控制。
