去除背景图像

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)是最后一个菜单中的“联系我们”之后到来。无论如何要关闭它。

来源

2012-05-09 Jhilom

你需要先关闭你的ul标签。 –

只需添加到这个CSS和它可以帮助

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

不过，这并不低于IE8

正常上工作

来源

2012-05-09 05:21:24 Jhilom

感谢它的工作，但你没有在IE8 – Jhilom

请纠正它。写这样的李：最后一个孩子，而不是这个li.last孩子 – sandeep

你可以这样写也：

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

第一关闭您的UL

来源

2012-05-09 05:22:48 sandeep

谁给我一个投票，请解释我的原因，所以这对我很好:) – sandeep

我给你一个upvote每个评论和答案。它是一个很好的答案 – Jhilom

这是行不通的 – Jhilom

添加class属性到最后一个项目，说<li class=last>contact us</li>，并添加规则.menubar li.last { background-image: none; }。

这适用于所有支持CSS的浏览器。虽然有点笨拙，但使用类选择器是最安全的，而笨拙因素在单个列表的问题上是无关紧要的。

来源

2012-05-09 05:26:36

如何在动态li上定义一个类？整个菜单来自Wordpress动态插件。 – Jhilom

去除背景图像

回答

相关问题