CSS使文本中的每个字母都具有不同的颜色[重复]答案

【问题标题】：CSS make every letter in a text of a different colour [duplicate]CSS使文本中的每个字母都具有不同的颜色[重复]
【发布时间】：2015-01-18 04:34:18
【问题描述】：

您好，我必须为每个字母制作不同颜色的文本。我试过这样做，它有效。我想知道是否有更快的方法来做到这一点，只使用 CSS。

p {font-size: 36px;
   font-family: sans-serif;
   }
.blue{color: blue;}
.rosso{color:red;}
.grigio{color:grey;}
.oro{color:gold;}
.fucsia{color:fuchsia;}
.verde{color:green;}
.giallo{color: yellow;}
.rosa{color:pink;}

我在html中使用它：

<p><span class="blue">F</span><span class="rosso">i</span><span class="giallo">l</span><span       class="verde">o</span></p>

【问题讨论】：

没有。没有办法为单个段落的不同字母定义不同的颜色（没有换行。）
不，您不能定位单个字母，除了第一个 (::first-letter)。
那个链接里有JavaScript..我不能用..我还没学过..

标签： css letters

【解决方案1】：

您可以使用 css 第 n 个子选择器 - p:nth-child() 执行此操作，根据您的要求在括号内指定您的项目编号（1、2、3 等）并为其设置颜色。

【讨论】：

为什么nth-child() 在这里会有所帮助？
你可以更有效地做到这一点，无需为每个字母编写类，只需指定第 n 个孩子的编号并定义你喜欢的颜色或任何属性。
但我认为类的想法是颜色可以应用于任何字母。使用这种方法，数字将通过索引 I.E 分配给元素。第一个元素必须是红色，第二个元素必须是蓝色等等。
您需要编写 p:nth-child(1){color:blue},p:nth-child(2){color:red} 等，您可以根据需要定义。
nth-child 不适用于单词中的字母。