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

【问题标题】：Having a specific background image for each and every list item每个列表项都有一个特定的背景图像
【发布时间】：2014-10-18 17:28:09
【问题描述】：

想知道是否有办法压缩它并让它继续下去

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 解决方案？

【问题讨论】：

要动态执行，您必须使用 JavaScript 执行此操作

标签： javascript html css css-selectors

【解决方案1】：

到目前为止，CSS 还无法将元素的索引与该元素的 CSS 属性相关联；使用 JavaScript 就很简单了：

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

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

使用 CSS，在未来有可能实现以下工作（但这纯粹是推测）：

ul {
    counter-reset: liCount;
}

ul li {
    counter-increment: liCount;
    background-image: url(counter(liCount) '.jpg');
}

这不在任何当前的浏览器中工作，并且可能从不在任何浏览器中工作。如前所述，这纯粹是推测性的。

【讨论】：

有趣的想法，它会非常需要在未来看到这样的东西，但现在 javascript 选项是最好的。非常感谢。

【解决方案2】：

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

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

或者，对于 PHP：

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

【讨论】：