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

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

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

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

确保将其放在您提供的 css 代码之后。没有理由这不应该工作。（如果您认为有冲突，请尝试添加!important）

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

Answer 2

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

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

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