如何让CSS :first-letter伪选择器仅匹配首个任意字符？

当使用:first-letter伪选择器时，如果首个字符是问号这类标点符号，浏览器会把它和后面的第一个字母一并识别为“首字母组”——这是CSS规范的默认行为，前缀标点（包括问号、感叹号、引号等）会被包含在:first-letter的选中范围内。

要实现仅选中首个字符，有两种可靠方案：

方法一：HTML单独包裹目标字符 #

直接用<span>把需要单独设置样式的首个字符包裹起来，给这个span设置样式即可，兼容性拉满，没有浏览器适配问题：

<style>
  .first-char { font-size: 50px; }
</style>
<span class="sizer"><span class="first-char">?</span>HI ALL</span>

方法二：CSS属性强制拆分字符 #

如果不想改动HTML结构，可以用unicode-bidi和direction属性打破浏览器默认的合并规则，强制让首个字符被单独识别：

<style>
  .sizer {
    unicode-bidi: isolate;
    direction: ltr;
  }
  .sizer:first-letter {
    font-size: 50px;
    unicode-bidi: normal;
    direction: ltr;
  }
</style>
<span class="sizer">?HI ALL</span>

unicode-bidi: isolate会让元素内的字符独立处理，确保:first-letter只选中第一个字符。这个方法需要现代浏览器支持（Chrome、Firefox、Safari 14+、Edge均兼容），旧版浏览器可能无法正常工作。

内容的提问来源于stack exchange，提问作者xaaaaaaaaaaaa