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

Having a specific background image for each and every list item

本文关键字：背景 图像 有一个 列表      更新时间：2023-09-26

我想知道是否有办法将其浓缩并在上进行

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，在未来，以下可能会工作（但这纯粹是猜测）：

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

这使得在任何当前浏览器中都不能工作，并且可能永远不能在任何浏览器中。如前所述，这纯属推测。

如果你不知道你有多少孩子，你会想使用JS。或者，如果你这样做了，但不想全部键入，或者有一个max，那么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");
}
相关文章：