给每个角色涂上不同的颜色

Question

我正在使用 KK Countdown 倒计时网站的圣诞节。

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

现在 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

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

使用颜色数组：

const colors = ["#0bf", "#f0b", "#fb0", "#b0f"];

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => 
    a + `<span style="background:${colors[i % colors.length]}">${ch}</span>`, ""
  );

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <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>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

使用随机颜色：

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => {
    const color= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    return a + `<span style="background:${color}">${ch}</span>`
  }, "");

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <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>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

上面的代码将获取 a 中的每个字母<span>并将其包装成span具有随机生成的背景颜色的新字母。