对你们来说,一个可能非常简单的CSS问题。
我正在为自己构建一个新网站,我想用一条竖线来划分每个菜单项,我通过在Firefox开发工具中找到CSS选择器来做到这一点:
.is-frontend #content-holder .semplice-navbar nav ul li{
border-right: solid #000000;
border-width: 1px;
}
看起来是这样的(你可以看到我圈出了罪犯):
现在,问题是:我找不到只针对最后一个菜单项的CSS选择器。我可以在开发工具的规则部分创建一个,如下所示:
element{
border:none;
}
这基本上在html中创建了一个内联样式属性。。。像这样:
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-345" style="border: none;">
你知道我如何删除最后一条垂直线(边框)吗?我没有子主题(正在考虑更改主题/html代码),但我仍然是WP的初学者。。。当然有更简单的解决方案?
如果你想看看这个网站,它是有通行证保护的,但菜单应该在那里。magmaworks.net
最合适的回答,由SO网友:Crazycoolcam 整理而成
使用CSS 3,可以使用:last child或:last类型选择器:
.is-frontend #content-holder .semplice-navbar nav ul li:last-child {
border-right: 1px solid #000000;
}
但是,您可以使用:first child(可在CSS2中使用)将其翻转过来,使其更向后兼容:
.is-frontend #content-holder .semplice-navbar nav ul li {
border-left: 1px solid #000000;
}
.is-frontend #content-holder .semplice-navbar nav ul li:first-child {
border-right: none;
}