jquery - 单词中交替字母的不同颜色

Question

我想为单词中的备用字母赋予绿色（或任何其他）颜色。

如何使用 CSS 做到这一点？ Jquery 也适合我

提前致谢

Answer 1

在这里演示

HTML

<div class="try">
<span>G</span>
<span>d</span>
<span>d`s </span>

<span>O</span>
<span>w</span>
<span>n </span>

<span>C</span>
<span>o</span>
<span>u</span>
<span>n</span>
<span>t</span>
<span>r</span>
<span>y</span>

</div>

CSS

.try span:nth-of-type(even){
    color:green;
}
.try span:nth-of-type(odd){
    color:red;
}

Answer 2

如果你可以使用 jQuery，你可以使用这个代码片段：

$( "span" ).each(function( index ) {
  var originalText = $( this ).text();
  var newText = "";
  for( var i = 0; i < originalText.length; i++)
  {
      if (i % 2 === 0)
        newText += "<span>" + originalText.charAt(i) + "</span>";  
      else
        newText += originalText.charAt(i);
  }
  $( this ).html(newText);
});

它用原始跨度内的跨度替换想要的字符，然后您可以设置该跨度的样式。

小提琴：http: //jsfiddle.net/m6RTW/

Answer 3

将字母设置在 a 中<span>并设置它们的样式。

<p style="color:red;font-weight:bold;font-size:34px;">
G<span style="color:green">o</span>d'<span style="color:green">s</span>
o<span style="color:green">w</span>n c<span style="color:green">o</span>u<span style="color:green">n</span>t<span style="color:green">r</span>y
</p>

jsFiddle 演示在这里

Answer 4

如果您想应用于CSS不超过 10 个字母的文本，那么您可以将其拆分为跨度并对其应用类。

<span class="green">H</span>
<span>E</span>
<span class="green">L</span>
<span>L</span>
<span class="green">O</span>

.green
{
    color:green;
}

Answer 5

将选定的字母放在 span 标签内并添加样式。

CSS：

.green {
    color: green;  
}

html:

<p>G<span class="green">o</span>d'<span class="green">s</span> o<span class="green">w</span>n co<span class="green">u</span>n<span class="green">t</span>r<span class="green">y</span></p>

或者添加偶/奇类（跨浏览器解决方案）：

<div class="colors">
    <span class="odd">a</span>
    <span class="even">b</span>
    <span class="odd">c</span>
    <span class="even">d</span>
</div>

CSS：

.colors .odd {
    color: red;
}
.colors .even {
    color: green;
}

Answer 6

CSS 只能应用于整个元素。所以你需要把你的文本分成元素。您可以通过手动、javascript 或 HTML 生成来完成此操作。

为了保持 HTML 简短，您可以这样做：（请参阅http://jsfiddle.net/9TY4J/）

<SPAN class="fancyColors"><B>G</B>o<B>d</B> .... </SPAN>

并编写一个 CSS：

.fancyColors
{
    color:red;
}
.fancyColors B
{
    color:green;
    font-weight:normal;
}