您可以为无序列表中的每个列表元素使用不同的图标图像吗？

Question

我不是CSS的高级用户,但我认为我有一个体面的工作知识.我正在尝试制作一个无序列表,为每个列表元素使用不同的图标.我还希望列表元素的背景颜色在悬停时更改.

有没有办法通过CSS做到这一点,或者你只是在列表元素中包含图标图像(如下所示)？

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

使用列表样式图像上的UL水平,使所有的图标相同,我一直没能找出另一种方式.我发现的大多数例子都教你如何使用列表中的图像,但前提是项目符号图像是相同的.对于我正在尝试这样做的方式,我绝对乐于接受建议和改进.

谢谢

<div class="content-nav">
  <ul>
    <li class="instructions"><a href="instructions.html">Instructions</a></li>
    <li class="voters"><a href="voters.html">Voters</a></li>
  </ul>
</div>

.content-nav {
    font-size:12px;
    width:160px;
    z-index:0;
}

.content-nav ul {
    padding:0 20px;
    margin:30px 0;
}

.content-nav li {
    padding:5px;
    margin:5px 5px;
}

.content-nav li a {
    color:#666;
    text-decoration:none;
}

.content-nav li.voters a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.voters a:hover {
    background:#0CF;
    color:#000;
}

.content-nav li.instructions a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.instructions a:hover {
    background:#0CF;
    color:#000;
}

Answer 1

您可以在每个列表元素上添加背景图像,并使用填充将文本推离它.

<ul>
    <li class="li1">List 1</li>
    <li class="li2">List 2</li>
</ul>

.li1 {
   background:url('li1.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}
.li2 {
   background:url('li2.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}

只需确保左边的填充尺寸与图像尺寸相同(如果你想要间距,可以稍微大一点)

Answer 2

使用CSS3的:nth-child()选择器,不需要在每个<li>元素上添加额外的标记:

现场演示

HTML:

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

CSS:

ul li:nth-child(1) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}

浏览器支持: IE9 +,FF3.5 +,SA3.1 +,OP9.5 +,CH2 +