每个角色的颜色不同
我正在使用KK倒计时对网站的圣诞节倒计时。
我有一个我必须遵循的设计，每天的每个字母都有蓝色背景和边框半径。
现在，html就是这样输出的
169 DAYS 23 19 48 HOURS kkc-dni类是我试图在这里定位的部分。
我想为该跨度内的每个字母添加背景颜色。
最好用CSS。 这可能吗？
我之前使用CSS来设置段落的第一个字母，但这是完全不同的，我找不到任何关于它的信息。
有什么建议？
注意：因为我使用插件来执行此倒计时，我不确定是否可以更改输出跨度和html的方式。 如果我可以将每个字母包裹在一个范围内，我会。
我想为该跨度内的每个字母添加背景颜色。
使用颜色数组：
现场演示
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'+ text.charAt(i) +''; } $el.html(newCont); });
上面将把每个单个字母包装到一个单独的span也会从Array列表中添加背景颜色。
一旦到达颜色列表结束将从第一个开始，依此类推。
使用随机颜色：
现场演示
$('.kkcountdown-box').find('span').each(function(){ var $el = $(this), text = $el.text(), len = text.length, newCont = ''; for(var i=0; i'+ text.charAt(i) +''; } $el.html(newCont); });
以上将获得内的每个字母并将其包装到具有随机生成的背景颜色的新span 。
如果不单独包装字符，则无法设置每个字母的样式。 这是问题的简单答案，特别是在标题中提到的。
但是，可以使用服务器端脚本或使用客户端脚本来完成包装。 如果这是可以接受的，你应该重新提出你的问题。
假设您没有尝试为每个字母赋予不同的背景颜色，您可以为每个范围指定CSS，如下所示：
.kkc-dni {background-color: red;}
示例： http ： //jsfiddle.net/jfriend00/WAPds/
如果您希望每个字母具有不同的背景颜色或其他独特的CSS，那么您必须将每个字母包装在其各自的跨度中。 如果无法控制生成的HTML，则可以使用JS以编程方式执行此操作。