css - 尝试删除第一个分隔符时不显示 css 菜单分隔符

Question

我有这个代码：

<div id="navigation">
        <ul>
            <li><a href="Default.aspx">Open POs</a></li>                              
            <li><a href="WebVisibility.aspx">Visibility</a></li>
            <li><a href="#">Live</a></li>
            <li><a href="#">Reports</a></li>
        </ul>
    </div>

这个CSS代码：

        #navigation
    {
        float: left;
        width: 1024px;
        background:#0386ce; 
    }

    #navigation ul
    {
        margin: 0;
        padding: 0;
    }

    #navigation ul li
    {
        list-style-type: none;
        display: inline;    
    }

    #navigation li a
    {
        display: block;
        float: left;
        padding: 1px 5px;
        color:#fff; 
        font-size: 14px;
        border-left: 1px solid #000;
    }

#navigation li a:hover { background:#000; }

    #navigation li a:first-child
    {
        border-left:none;
    }

当尝试使用最后一行 css 代码删除第一个分隔符时，(...) border-left:none;它会删除所有分隔符。

我在这里做错了什么？

Answer 1

您需要访问第一个li. 相反，您正在访问a任何liin 中的第一个#navigation。

试试这个：

#navigation li:first-child a
{
   border-left:none;
}