用::first-letter伪元素可直接实现首字下沉，需作用于块级元素且首字符为纯文本，支持字体、颜色、浮动等样式，但不支持宽高设置，须显式声明color，避免前导空格和标点干扰。
用 ::first-letter 伪元素实现首字下沉
直接用 CSS 的 ::first-letter 就能搞定，不需要 JS、不用额外标签包裹。它专为段落首字符设计，支持字体大小、颜色、行高、浮动等样式控制。
常见错误是写成 :first-letter（单冒号），在现代浏览器里虽部分兼容，但规范已明确要求双冒号；另一个坑是把它用在 <div> 或未定义 <code>display: block 的容器上——必须作用于块级元素，且该元素内第一个字符得是文本节点（不能被 <span></span> 等标签包着）。
- 只对块级元素生效，
<p></p>、<section></section>、<div style="display: block"> 都可以 <li>首字符必须是纯文本，如果开头是 <code><em>我</em>，那::first-letter不会选中“我” - 中文、英文、数字都支持，但标点符号（如《、【、"）可能不触发，取决于浏览器解析逻辑
- 避免设
line-height过小，否则大字可能和第二行重叠；推荐配合float: left+margin-right控制排版
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
margin-right: 0.2em;
}
为什么不用 <span></span> 手动包裹
手动加 <span class="dropcap">这</span> 看似可控，实际埋了三个雷：内容编辑时容易漏掉、CMS 或 Markdown 渲染后自动剥离、多语言站点里首字位置可能因语言结构变化而错位（比如阿拉伯语右向左书写）。
用 ::first-letter 是声明式控制，样式与结构分离，只要 HTML 是标准段落，就始终生效。唯一例外是某些富文本编辑器输出的
<p><br>开头，这时首字符其实是换行符，伪元素不触发——得确保段落真正以文字开头。
立即学习“前端免费学习笔记（深入）”；
- 动态插入内容（如 AJAX 加载）后，无需重新 DOM 操作，样式自动应用
- 响应式场景下，可配合媒体查询调整
font-size，比如小屏缩到2.2em - 不支持 IE9 及更早版本，但 IE10+ 和所有现代浏览器都 OK
::first-letter 在不同浏览器里的行为差异
Chrome 和 Firefox 对中文首字识别一致，Safari 曾在 15.4 之前把「嗯」「啊」等语气词后的空格算作“首字符”，导致样式错位；现在基本修复。最稳的做法是确保段落开头无空白符——服务端或构建时 trim 掉 p 内容前导空格。
另一个细节：::first-letter 会把连字（ligature）当一个字符处理，但中文不存在这个问题；不过遇到「ff」这类拉丁连字时，不同引擎渲染可能有细微差别，日常中文排版不用管。
- 不要给
::first-letter设width或height，它不接受盒模型尺寸控制 - 设置
color时，父级color不会继承给伪元素，必须显式声明 - 若段落含
::first-letter 就是为此生的。
