2

我有一个简单的列表，我设法排成一行，并为所有项目提供背景图像。但是我想让一些列表项（列表项 3）具有不同的背景图像。有没有办法在不使用 !important 的情况下做到这一点？我的代码在下面。

CSS

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

的HTML

<div class="my-list">
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="different-bg">List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

谢谢

4

2 回答 2

8

您只需要增加选择器的特异性：

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.my-list li.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

请参阅计算选择器的特异性

于 2012-06-25T16:26:49.843 回答
0

看我的例子：jsfiddle

一切正常。尝试制作更常见的样式，并将它们写为补充更改。将此添加到您的CSS：

.my-list .different-bg {
    background-image: url(http://placekitten.com/g/200/300);
}​

如果您有兴趣，可以在这里找到更多详细信息：获取特定的 css 样式

于 2012-06-25T16:29:41.597 回答