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位。它会让您选择<a>中的#label1元素。但是，由于您要将这些规则应用于#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'); }

使用图像作为非链接的列表项

2 个答案: