Question

HTML

<div>
<ul class="menubar">
 <li>home</li>
 <li>product</li>
 <li>about us</li>
 <li>contact us</li>
</div>

CSS

.menubar li
{
    float: left;
    position: relative; 
    display: block;
    text-decoration: underline;
    text-transform:capitalize
    background:url(../image/rightborder.png) no-repeat right center;
}

.menubar li:hover
{   

    background: #FF0000 ; 
    color: #FFFFFF;
}

这项工作运作正常，但问题是background:url(../image/rightborder.png)在最后一个菜单“联系我们”之后出现。无论如何都要关掉它。

Answer 1

只需将其添加到CSS中即可提供帮助

.menubar li:last-child { background:none}

但它在IE8以下无法正常工作

Answer 2

为最后一项添加class属性，例如<li class=last>contact us</li>，然后添加规则.menubar li.last { background-image: none; }。

这适用于所有支持CSS的浏览器。虽然有点笨拙，但是使用类选择器是最安全的，当它只是一个列表时，笨拙因素就无关紧要了。

Answer 3

您也可以这样写：

.menubar li + li
{
    background:url(../image/rightborder.png) no-repeat left center;
}

首先关闭 UL

删除最后一个li上的背景图片

3 个答案: