每个角色的颜色不同

Question

我正在使用KK倒计时来减少网站的Xmas倒计时。

我有一个我必须遵循的设计，每天的每个字母都有蓝色背景和边框半径。

现在html就像这样输出

<span class="kkcount-down" data-time="1387929600">
     <span class="kkcountdown-box">
          <span class="kkc-dni">169</span>
          <span class="kkc-dni-text">DAYS </span>
          <span class="kkc-godz">23</span>
          <span class="kkc-godz-text"> </span>
          <span class="kkc-min">19</span>
          <span class="kkc-min-text"> </span>
          <span class="kkc-sec">48</span>
          <span class="kkc-sec-text">HOURS</span>
     </span>
</span>

kkc-dni类是我试图在这里定位的部分。

我想为该范围内的每个字母添加背景颜色。

最好使用CSS。这可能吗？

之前我使用CSS来设置段落的第一个字母，但这是完全不同的，我找不到任何信息。

有什么建议吗？

注意：因为我使用插件来执行此倒计时，所以我不确定是否可以更改输出跨度和html的方式。如果我可以将每个字母包裹在一个范围内，我会。

Answer 1

如果不单独包装字符，则无法设置每个字母的样式。这是问题的简单答案，特别是在标题中提到的。

但是，可以使用服务器端脚本或客户端脚本完成包装。如果这是可以接受的，你应该重新表述你的问题。

Answer 2

  

我想为该范围内的每个字母添加背景颜色。

使用颜色数组：

的 LIVE DEMO

var myColors = ["#cf5", "green", "purple", "blue"]; // YOU CAN ADD MORE COLORS!

$('.kkcountdown-box').find('span').each(function(){

  var $el = $(this),
    text = $el.text(),
    len = text.length,
    coLen = myColors.length,
    newCont = '';

  for(var i=0; i<len; i++){
    newCont += '<span style="background:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>';
  }

  $el.html(newCont);

});

以上所述，将每个字母包装成单独的span也会从数组颜色列表中添加背景颜色。
一旦到达颜色列表结束，将从第一个开始，依此类推。

使用随机颜色：

的 LIVE DEMO

$('.kkcountdown-box').find('span').each(function(){

  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for(var i=0; i<len; i++){
    var bgColor= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    newCont += '<span style="background:'+bgColor+'">'+ text.charAt(i) +'</span>';
  }

  $el.html(newCont);

});

以上内容会将<span>内的所有字母都包含在内，然后将其换成一个随机生成背景颜色的新span。

Answer 3

假设您没有尝试为每个字母添加不同的背景颜色，您可以为每个范围指定CSS，如下所示：

.kkc-dni {background-color: red;}

此处示例：http://jsfiddle.net/jfriend00/WAPds/

如果您希望每个字母都有不同的背景颜色或其他独特的CSS，那么您必须将每个字母包装在各自的单独范围内。如果无法控制生成的HTML，则可以使用JS以编程方式执行此操作。