Css 如何从菜单中删除分割器图像

我创建了一个带有分割图像的菜单。因此，每个列表项看起来彼此独立。但问题是我不知道如何移除最后一个分隔符。我试过与li:last child{background:none}合作，但不起作用。下面是我目前正在使用的代码：

.top-menu {
    background: url(../images/bg_linkstop.jpg) repeat-x;
    border: #FFF 2px solid; 
    border-radius: 10px;
    margin: 10px 0;
    height: 52px;  
    list-style: none;

    li {
        float: left;
        height:48px;
        padding: 0 22px;
    background : url(../images/bg_divisor.png) no-repeat center right;

        }       
}

&结果如下：

---

您可以看到它看起来不太好，因为最后一个菜单项的右侧有一个分隔符。我想删除该分割图像。

尝试在css后添加以下规则：

.top-menu li:last-child {
    background :none;
} 

确保将此放在您提供的css代码之后。没有理由这不起作用。（如果您认为存在冲突，请尝试添加

！重要
）

这将仅删除最后匹配的
li
的背景。您可以查看
:last of type
选择器，它认为它是自我解释的。尽管此选择器不适用于IE8和更早版本

您可以找到有关此选择器的详细信息

将背景位置从右向左更改，以便您可以瞄准第一个项目（见下文）

第一个孩子是IE8支持的

li:first-child {
  background: none;
}

老兄，我以前试过。但是没有起作用。不过这一次可以工作了，谢谢
li:first-child {
  background: none;
}