React项目中text-transform: capitalize样式仅首个<a>标签生效问题咨询

嘿，这个问题我之前也踩过坑！这绝对不是React的Bug，而是CSS text-transform: capitalize 本身的规则特性，结合你导航文本的状态导致的现象。

核心原因说清楚： #

CSS里的text-transform: capitalize 规则，本质是「把每个单词的第一个字符转成大写」，但有个关键前提——如果这个单词的第一个字符本来就是大写，它就啥也不会做！而且它不会管单词里其他字符的大小写。

你遇到的“只有第一个生效”的情况，大概率是其余导航链接的文本满足这些情况之一：

怎么验证和解决？ #

1. 先查原始文本：看看你React代码里那些没生效的<a>标签，文本是不是本来就首字母大写或者全大写了？如果是，那capitalize当然没变化。
2. 强制统一首字母大写：要是不管原始文本啥样，都想实现首字母大写的效果，给你两个办法：
   • 用JS处理文本：写个小工具函数，渲染的时候转好再输出

     const capitalizeText = (str) => {
       if (!str) return '';
       return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     };
     // 用的时候直接套
     <a href="/about">{capitalizeText('about')}</a>
     

   • 用CSS组合技巧：先把所有文本转小写，再把首字母转大写（注意要把设成行内块级，不然::first-letter可能不生效）

     nav a {
       display: inline-block;
       text-transform: lowercase;
     }
     nav a::first-letter {
       text-transform: uppercase;
     }