去掉最后一页的背景图片

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