我知道可以设置图像而不是 HTML 默认项目符号:
list-style-image: url(...);
但我还没有找到一种方法可以在同一个列表中设置不同的图像。例如:显示 img_1 而不是第一个项目符号,而不是显示接下来的 5 个项目符号 img_2 ...。
最佳答案
HTML-
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS(不适用于 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');
}
所有浏览器的 CSS,包括 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 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21161569/