::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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
再配 CSS：
.first-char { font-size: 2em; font-weight: bold; }
- 别指望用
text-indent或letter-spacing模拟——它们不改变字符归属，也控制不了“哪个是第一个” - JavaScript 动态加
<span></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之类特性，中文首字可能意外触发字体切换，影响视觉节奏
下划线本身不是文字内容的起点，这个边界比表面看起来更硬——没标记，就没有“第一”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
