如何为index=0的元素实现单词首字母大写？:first-letter失效

首先，你遇到的核心问题是**::first-letter伪元素只能选中元素内的第一个字母**，无法同时处理多个单词的首字母，而你的预期是让两个单词的首字母大写（TEXT→Text、PARAGRAPH→Paragraph），单纯靠::first-letter做不到。

方案一：用text-transform: capitalize快速实现 #

直接利用CSS的text-transform: capitalize属性，它会自动将每个单词的首字母转为大写，其余字母转为小写，刚好匹配你的需求：

p[index='0'] {
  color: red;
  text-transform: capitalize;
}

对应的HTML保持不变：

<p index="0">TEXT 0 PARAGRAPH</p>
<p index="1">TEXT 1 PARAGRAPH</p>
<p index="2">TEXT 2 PARAGRAPH</p>
<p index="3">TEXT 3 PARAGRAPH</p>

这样设置后，index=0的段落会显示为红色的「Text 0 Paragraph」，完全符合你的预期。

方案二：手动包裹首字母（精准控制） #

如果需要更精准的控制（比如只指定特定单词的首字母大写），可以在HTML里用<strong>包裹需要大写的字母，再配合CSS设置样式：

HTML修改为：

<p index="0"><strong>T</strong>EXT 0 <strong>P</strong>ARAGRAPH</p>
<p index="1">TEXT 1 PARAGRAPH</p>
<p index="2">TEXT 2 PARAGRAPH</p>
<p index="3">TEXT 3 PARAGRAPH</p>

CSS设置：

p[index='0'] {
  color: red;
  text-transform: lowercase;
}
p[index='0'] strong {
  text-transform: uppercase;
}

这种方式可以精确指定哪些字母需要保持大写，其余字母转为小写。

为什么你原来的代码不生效？ #

你原来的CSS中，p[index='0']设置了text-transform: lowercase，然后p[index='0']:first-letter设置text-transform: uppercase——这只会让第一个字母（T）大写，其余所有字母（包括PARAGRAPH里的字母）都会被转为小写，所以最终显示的是「Text 0 paragraph」，和你的预期不符。

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