尝试删除第一个分隔符时，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中任意li中的第一个#navigation。

试试这个：

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