替代字母的不同的颜色在词

Question

我想为一个单词中的替代字母指定绿色（或任何其他）颜色。

如何使用CSS执行此操作？ Jquery也适合我

先谢谢

Answer 1

如果你可以使用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 2

<强> DEMO HERE

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 3

将字母设置在<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 Demo here

Answer 4

如果你想将CSS应用于不超过10个字母的文本，那么你可以在span中打破它并将类应用到它。

<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;
}