Html 使用CSS将特定样式应用于列表项

我有一个简单的列表，我设法把它排成一行，并有所有项目的背景图像。但是，我想让一些列表项（列表项3）具有不同的背景图像。有没有一种方法可以做到这一点而不使用！重要吗？我的代码如下

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>

清单项目1
清单项目2
列出第3项
清单项目4

---

谢谢

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

.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);
}

请参见我的示例：

一切正常。 试着创造出更常见的风格，并把它们作为对变化的补充。 将此添加到css中：

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

---

如果您感兴趣，可以在这里找到更多详细信息：

。我的列表li.different-bg{…}

就足够了。