包含不同图像的HTML列表作为项目符号 [英] HTML list with different images as bullets

问题描述

我知道可以设置图片而不是HTML默认项目符号：

I know it is possible to set an image instead of the HTML default bullets:

list-style-image: url(...);

但我没有找到一种方法来设置不同的图像。 eG：代替第一个项目符号，将显示img_1，而不是显示接下来的5个项目符号img_2 ...。

But I havent't found a way how I can set different images in one and the same list. e.G.: Instead of the first bullet, img_1 is shown, instead of the next 5 bullets img_2 is displayed ... .

推荐答案

HTML-

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

CSS（不适用于IE 7,8） -

CSS(doesn't work on IE 7,8)-

ul li:nth-child(1){
list-style-image:url('image1.png');
}
ul li:nth-child(2){
list-style-image:url('image2.png');
}
ul li:nth-child(3){
list-style-image:url('image3.png');
}

包括IE 7,8在内的所有浏览器的CSS

CSS for all Browser including IE 7,8

ul li:first-child{
list-style-image:url('image1.png');
}
ul li:first-child + li{
list-style-image:url('image2.png');
}
ul li:first-child + li + li{
list-style-image:url('image3.png');
}
ul li:first-child + li + li + li{
list-style-image:url('image4.png');
}

这篇关于包含不同图像的HTML列表作为项目符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！