Question

我添加了一个分隔符＆＃34; |＆＃34;使用:after选择器的每个菜单项。这也将它添加到最后一个元素。我一直试图使用:last-child选择器删除它，但它无法正常工作。

我将在下面列出我的代码并提供一个jsfiddle链接。

HTML：

<nav id="nav_bar">
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Company Profile</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</nav>

CSS：

#nav_bar {
    background-color: #debb23;
    height: 45px;
}

#nav_bar ul{
    list-style-type: none;
}

#nav_bar ul li{
    display: inline-block;
    margin: 10px 0;
}

#nav_bar ul li a{
    color: #ffffff;
    text-decoration: none;
    padding: 0 15px;
}

#nav_bar ul li:after{
    content: "|";
    color: #ffffff;
}

#nav_bar ul li:last-child {
    content: none;
}

这里是jsfiddle链接，http://jsfiddle.net/e3x369k0/

我感谢任何帮助。

Answer 1

您定位的是最后一个li元素的内容而不是其:after伪元素的内容。

从以下位置更改选择器：

#nav_bar ul li:last-child {
    content: none;
}

到

#nav_bar ul li:last-child:after {
    content: none;
}

实例：http://jsfiddle.net/5x55emaf/

Answer 2

您在最后一条CSS规则中错过了:after。应该是这样的：#nav_bar ul li:last-child:after

Answer 3

试试这个，我多年来一直在使用这种技术：）

#nav_bar ul li{
border-right:1px solid black;
}

#nav_bar ul li:last-child{
border-right: 1px solid tranparent;
}

最后一个子选择器不在导航菜单上工作

3 个答案: