::first-letter可实现首字母大写效果，但仅对块级元素生效且要求首字符为字母或数字；常见失效原因包括首字符为空格、HTML标签、父容器display非block/inline-block，或Unicode标点兼容问题；需用float:left实现首字下沉，现代浏览器均支持，内容不可控时需JS辅助。
用 ::first-letter 实现首字母大写效果
直接给段落加 很多情况下写了样式却没反应，基本逃不开这几个原因： 最简可用样式长这样，注意几个易错点： 其中 立即学习“前端免费学习笔记（深入）”； Hello world::first-letter 伪元素就能控制首字母样式，但要注意它只对块级容器（如 、::first-letter 的常见失效场景
里第一个字符是空格、 或 ::first-letter 就找不到“首字母”display: inline 或 display: flex，伪元素不触发font-variant: small-caps 或其他字体特性，和 font-size 冲突导致视觉上不明显基础写法与关键参数
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 输出的 标签，这时伪元素完全无效。遇到这种场景，得靠 JS 提前提取首字母包一层 ，再单独样式控制。
