Html 当每个字符位于一个div中时，如何将样式分别应用于每个字符？

我想为我的一个div的每个字母提供不同的背景CSS样式，例如：

<div class="hello">1999</div>

1999

因此，每个单词背后都有一个类似计数器的背景。供参考：

---

在不逐个分离div类的情况下，如何做到这一点？

如果希望在页面加载后执行此操作，可以使用JavaScript

像这样的

const div=document.querySelector（“.hello”）
div.innerHTML=div.textContent.split（“”）.map（字母=>`${letter}`）。join（“”

.block{
显示：内联块；
高度：50px；
宽度：50px；
背景色：黑色；
颜色：白色；
保证金：2倍；
字体大小：34px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：50px；
字体系列：arial，无衬线；
}

---

1999

如果要在页面加载后执行此操作，可以使用JavaScript

像这样的

const div=document.querySelector（“.hello”）
div.innerHTML=div.textContent.split（“”）.map（字母=>`${letter}`）。join（“”

.block{
显示：内联块；
高度：50px；
宽度：50px；
背景色：黑色；
颜色：白色；
保证金：2倍；
字体大小：34px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：50px；
字体系列：arial，无衬线；
}

---

1999

您可以使用背景和单空格字体：

。你好{
显示：表格；
保证金：20px自动；
字体大小：100px；
字母间距：0.5厘米；
字体系列：monospace；
颜色：#fff；
背景：
重复线性渐变（向右，#000 0 calc（1.5ch-10px），透明0 1.5ch）
0 0/calc（100%-11px）100%无重复；
左侧填充：10px；
}

1999
19990
333

您可以使用背景和单空格字体：

。你好{
显示：表格；
保证金：20px自动；
字体大小：100px；
字母间距：0.5厘米；
字体系列：monospace；
颜色：#fff；
背景：
重复线性渐变（向右，#000 0 calc（1.5ch-10px），透明0 1.5ch）
0 0/calc（100%-11px）100%无重复；
左侧填充：10px；
}

1999
19990
333

请使用函数。@Robinsing我使用了纯wordpress，所以我不能真正用str_Split调用变量。请使用函数。@Robinsing我使用纯wordpress，所以我不能真正用str_Split调用变量。我没有看到带post@Gerard这个问题的措辞，不会给人留下太多的印象，OP真的知道在他们的需求方面，单独使用CSS可以做什么，不可以做什么。他们拒绝了一项建议，即已经使用PHP分割内容，尽管这已经被标记了。因此，考虑到他们的限制，我认为JS可能是一个有效的解决方案。我还假设OP希望在不干扰wordpress主题或PHP的情况下在他们的页面中插入一些内容。不需要类“block”。在CSS中，只需应用

.hello>span{}

@mplungjan嘿，让你知道它是有效的，我想你可以用CSS子方法指定每个span，所以我只需键入。block:n子（8）并从那里开始。谢谢你的javascript解决方案，尽管我没有标记它，脚本小子的错误，再见！我没有看到带有post@Gerard这个问题的措辞并没有给人留下太多的印象，OP真的知道在他们的需求方面，单独使用CSS可以做什么，不可以做什么。他们拒绝了一项建议，即已经使用PHP分割内容，尽管这已经被标记了。因此，考虑到他们的限制，我认为JS可能是一个有效的解决方案。我还假设OP希望在不干扰wordpress主题或PHP的情况下在他们的页面中插入一些内容。不需要类“block”。在CSS中，只需应用

.hello>span{}

@mplungjan嘿，让你知道它是有效的，我想你可以用CSS子方法指定每个span，所以我只需键入。block:n子（8）并从那里开始。谢谢你的javascript解决方案，尽管我没有标记它，脚本小子的错误，再见！