将图像用于不是链接的列表项

Question

我有以下代码：

<footer id="footer">
    <ul id="labels">
        <li id="label1">About</li>
        <li id="label2"><a href="">blah</a></li>
        <li id="label3"><a href="">blah</a></li>
        <li id="label4"><a href="">blah</a></li>
        <li id="label5"><a href="">blah</a></li>
    </ul>
</footer>

我知道如何为li项目2-5指定图像，但不确定如何为label1指定图像

我有下面的CSS，但是只有当label1有<a href="">标签时它才能工作。有没有办法像我尝试的那样去做?如果没有，我应该如何去做？

#label1 a { 
    height:9px; 
    width:43px; 
    background: url(/Content/images/footer/about.png) no-repeat 0 0; 
    padding:0; 
}

对不起，我是CSS/HTML的新手

Answer 1

#label1 { /* I've edited this rule */
    height: 9px;
    width: 43px;
    background: url(/Content/images/footer/about.png) no-repeat 0 0;
    padding: 0;
}

删除a位。它使您可以在#label1中选择<a>元素。但是，因为您希望将这些规则应用于#label1，所以只需删除a选择器。

Answer 2

您可以为每个标签使用CSS的list-style-image

li#label1{ list-style-image:url('img1.jpg'); }
li#label2{ list-style-image:url('img2.jpg'); }
li#label3{ list-style-image:url('img3.jpg'); }
li#label4{ list-style-image:url('img4.jpg'); }
li#label5{ list-style-image:url('img5.jpg'); }
li#label6{ list-style-image:url('img6.jpg'); }