html - 删除最后一列的背景图片

标签 html css wordpress

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) 出现在最后一个菜单“联系我们”之后。无论如何要关闭它。

最佳答案

添加 class属性到最后一项,比如 <li class=last>contact us</li> , 并添加规则 .menubar li.last { background-image: none; } .

这适用于所有支持 CSS 的浏览器。虽然有点笨拙,但使用类选择器是最安全的,当涉及单个列表时,笨拙因素是无关紧要的。

关于html - 删除最后一列的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10510225/

相关文章:

javascript - 为什么每个按钮只能工作一次?

html - 如何使用 Google 开发者工具在本地主机上定位 HTML 文件?

css - wordpress woocommerce 图像大小 - 容器正在拉伸(stretch)图像

css - 如何在 Avada WP 主题中添加自定义 css 响应?

css - Google Autocomplete pac-icon 在 IE 中模糊

javascript - 我可以调用内部包含 php 的外部 jQuery 文件吗?

html - 背景图像上的响应式设计 css 按钮,调整大小时固定位置问题

css - 将网页打印为 pdf 以显示所有 css 样式

Javascript 汉堡菜单切换

html - 是什么导致了两个元素之间的这个空间,我该如何摆脱它?