如何从菜单中删除分隔图像

Question

我创建了一个带有分隔图像的菜单。所以每个列表项看起来都是彼此分开的。但问题是我无法弄清楚如何删除最后一个分隔符。我尝试使用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;

        }       
}

＆安培;结果如下：

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

Answer 1

尝试在后添加以下规则 ：

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

请务必在之后放置您提供的css代码。没理由这不行。 （如果您认为有冲突，请尝试添加!important）

这将仅删除最后匹配的li的背景。

Answer 2

您可以查看:last-of-type选择器，它认为这是自我解释。虽然这个选择器不适用于早期的IE8

您可以找到有关此选择器的更多信息here

Answer 3

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

从右向左更改bg位置，以便您可以定位第一个项目（见下文）

第一个孩子支持IE8

li:first-child {
  background: none;
}