Javascript 每个列表项都有一个特定的背景图像

我想知道是否有一种方法可以把它浓缩并继续下去

li:nth-child(1){
    background-image: url(1.jpg);
}
li:nth-child(2){
    background-image: url(2.jpg);
}
li:nth-child(3){
    background-image: url(3.jpg);
}
li:nth-child(4){
    background-image: url(4.jpg);
}
li:nth-child(5){
    background-image: url(5.jpg);
}

等等等等

---

是否有一种方法可以让纯css变量继续这样做，或者有一种更简单的javascript解决方案

CSS还没有办法将元素的索引与该元素的CSS的属性相关联；使用JavaScript非常简单：

var liElements = document.querySelectorAll('li');

[].forEach.call(liElements, function (li, index) {
    li.style.backgroundImage = 'url(' + index + '.jpg');
});

有了CSS，未来可能会出现以下情况（但这纯粹是猜测）：

---

这在任何当前浏览器中都不起作用，并且可能永远不会在任何浏览器中起作用。如前所述，这纯粹是推测。

如果你不知道你有多少孩子，你会想使用JS。或者，如果你这样做了，但不想把它全部输入出来，或者有一个max，那么PHP可以生成CSS文件，这比JS在加载后生成CSS文件要快

var liElems = document.getElementsByTagName('li');
for(var i = 0; i < liElems.length(); ++i){
    li.style.backgroundImage = 'url("' + i + '.jpg")';
}

var liElems=document.getElementsByTagName（'li'）；
对于（变量i=0；i

或者，对于PHP：

for($idx = 0; $idx < MAGIC_NUM; ++$idx){
    print("li:nth-child($idx){");
    print("    background-image: url($idx.jpg);")
    print("}\n");
}

for（$idx=0；$idx

要动态执行，必须使用javascript。有趣的想法是，将来需要看到类似的内容，但目前javascript选项是最好的。非常感谢，谢谢。

for($idx = 0; $idx < MAGIC_NUM; ++$idx){
    print("li:nth-child($idx){");
    print("    background-image: url($idx.jpg);")
    print("}\n");
}