Question

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

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

Answer 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');
}

在任何当前浏览器中都无法正常工作，并且永远不会在任何浏览器中工作。如上所述，这纯粹是推测性的。

Answer 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");
}

为每个列表项具有特定的背景图像

2 个答案: