::first-letter 仅对块级元素生效，支持有限CSS属性，中文/标点开头时行为不一，兼容性差且易受text-transform等影响，推荐手动包裹首字以确保效果。
用 ::first-letter 选中段落首字母
直接在 p 或带类名的块级元素上加 ::first-letter 伪元素即可生效，但注意它只对块级容器起作用。如果父元素是 inline（比如没设 display 的 span），这个伪元素会被忽略。
常见写法：
p::first-letter {
color: #e74c3c;
font-size: 2em;
font-weight: bold;
}
::first-letter 的样式限制和兼容性
这个伪元素不支持所有 CSS 属性：只能用字体、颜色、背景、边距、浮动、行高、文本装饰等有限属性。像 display、width、height 这类布局属性在多数浏览器里会被忽略（Chrome 和 Firefox 会静默丢弃）。
- IE 从 9 开始支持，但 IE9–10 对
float+line-height组合渲染异常 - Safari 在某些版本中对中文首字支持不稳定（尤其遇到全角标点或空格开头时）
- 如果段落以空格、换行或标点（如 “《”、“【”）开头，
::first-letter可能选不到预期字符
首字不是字母或数字时的处理方式
当段落以中文、日文或标点开头，::first-letter 仍会生效，但行为因浏览器而异。例如：“你好。” 中的 “你” 通常被选中；但 “（你好）” 中的 “（” 可能被选中，也可能跳过——这取决于浏览器对 Unicode 标点的判定逻辑。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是手动包裹首字：
<p><span class="dropcap">你</span>好，今天怎么样？</p>
再配合 CSS：
.dropcap {
color: #2980b9;
font-size: 2.5em;
line-height: 0.8;
float: left;
margin-right: 0.2em;
}
与 text-transform 或字体特性冲突的情况
如果段落设置了 text-transform: uppercase，::first-letter 的颜色和大小仍生效，但大小写转换优先级更高——也就是说，首字母会被转成大写后再应用样式。但若同时用了 font-variant-caps: small-caps，部分旧版 Safari 可能导致首字母样式失效。
- 避免在同一个选择器里混用
text-transform和::first-letter控制大小写 - 需要首字母大写且其他小写？改用 JS 提取首字母重写 HTML，或用
:not(:first-of-type)配合其他方案 - 使用变量字体时，
font-variation-settings在::first-letter中支持度较差，建议降级为传统字体族
font-size 放大后未配合适当的 line-height 和 margin，容易把第二行文字顶开。这种细节没法靠伪元素自动修复，得手动调。 
