::first-letter只匹配首个字母或数字字符，跳过下划线等标点；需手动包裹目标字符实现样式控制，避免依赖自动识别。
为什么::first-letter选不到下划线开头的字母
因为::first-letter只作用于**文本内容的第一个“排版意义上的字母或数字”**，遇到标点、空格、换行符、下划线_这类非字母数字字符时，会直接跳过它们，去找后面第一个符合条件的字符。所以下划线开头的段落，::first-letter根本不会匹配到_，更不会把它当“首字母”来样式化。
::first-letter能选中哪些字符
它只对 Unicode 中属于“字母”（Letter）或“数字”（Number）类别的字符生效，比如 a–z、A–Z、0–9、中文、日文假名、阿拉伯数字等。像 _、-、*、「、（ 这些都属于“标点符号”（Punctuation）类别，被完全忽略。
- ✅ 可以选中：
hello的h、你好的你、123abc的1 - ❌ 无法选中：
_hello的_、-world的-、(text)的空格或括号
想给下划线后的首字母加样式，怎么办
得绕开::first-letter，用显式标记代替自动识别。最稳的方式是手动包裹目标字符：
<p><span class="first-char">h</span>ello</p>
再配 CSS：
立即学习“前端免费学习笔记（深入）”；
.first-char { font-size: 2em; font-weight: bold; }
- 别指望用
text-indent或letter-spacing模拟——它们不改变字符归属，也控制不了“哪个是第一个” - JavaScript 动态加
<span>可行，但要注意：必须等 DOM 渲染完成后再找第一个字母，且要跳过开头所有非字母数字字符 - 如果内容来自 CMS 或用户输入，建议后端/编辑器层就做清洗或预标记，避免前端反复正则匹配
兼容性和性能注意点
::first-letter 在现代浏览器里基本没问题，但有两个隐藏坑：
- 在 Firefox 中，如果首字母是连字（ligature，如
fi合成一个 glyph），::first-letter可能表现异常；Chrome/Safari 更稳定 - 不要在
::first-letter里用display: block或float以外的复杂布局属性——它本质是个“伪内联盒子”，很多 Flex/Grid 行为不支持 - 若父元素用了
font-variant-east-asian: traditional之类特性，中文首字可能意外触发字体切换，影响视觉节奏
下划线本身不是文字内容的起点，这个边界比表面看起来更硬——没标记，就没有“第一”。
