css伪元素::first-letter首字母样式无法应用_通过文本节点选择和字体属性实现

::first-letter对下划线文本无效，因下划线“_”不属于Unicode字母类，不满足CSS规范中“可排版为字母的字符”要

求；其生效需同时满足父元素display为block等、首字符为Unicode字母、无前置空白及未被定位等破坏流样式干扰。

为什么 ::first-letter 对带下划线的文本无效

根本原因在于：浏览器只对纯文本节点的首字符应用 ::first-letter，一旦首字符是 _（下划线），它会被视为标点或分隔符，在多数字体和渲染引擎中被排除在“字母”范畴之外。CSS 规范明确要求该伪元素仅作用于“可排版为字母的字符”，而 _ 不属于 Unicode 字母类（Lu/Ll/Lt/Lm/Lo/NL），因此直接失效。

::first-letter 的实际生效条件

必须同时满足以下全部条件，伪元素才会触发：

• 父元素 display 值为 block、inline-block、table-cell 或 list-item
• 首字符是 Unicode 字母（如 A–Z、a–z、中文、日文平假名等），不是 _、-、'、" 等标点
• 首字符前无空格、换行、  或其他不可见字符
• 未被 float、position: absolute 等破坏正常流的样式干扰

用文本节点选择 + 字体属性绕过限制

既然伪元素走不通，就手动定位首字符——把下划线后的第一个字母包裹进 ，再单独设置样式。关键点是：确保该字母在 DOM 中是独立文本节点的开头，且不被父级 font-family 影响字形表现。

_Hello world

容易被忽略的兼容性细节

手动包裹方案看似简单，但有三个隐蔽坑：

• innerHTML 会销毁原有子元素（比如内嵌链接或图标），需先提取并重建结构
• 中文场景下，\u4e00-\u9fa5 范围不覆盖所有汉字（缺繁体、生僻字、扩展区），建议改用 /^_\p{Letter}/u 正则（需运行环境支持 Unicode 属性转义）
• 若父容器设置了 text-transform: uppercase，要同步在 上设置，否则大小写不一致

真正难的不是加样式，而是判断「谁才算第一个有效字母」——尤其当文本来自 CMS 或用户输入时，前置空格、零宽字符、BOM 都会让 textContent[0] 失效。动手前先 console.log(JSON.stringify(text[0])) 看一眼真实字符码。