css - :last-child border affect submenu

Question

在菜单中，我将 last-child 声明应用于 { border: none;}。在那之后，我的 SUBmenu 不显示边框，即使有声明:{border-bottom: 1px solid black;} 知道为什么我的第二个声明不起作用吗？ FIDDLE

P.S 我发现当我将 ul.topmenu.... 更改为 ul.... 时，一切都很完美。但我仍然需要能够使用我的类(class)名称。

/************QUESTION ZONE**************/

ul li a {
    border-bottom: 1px solid black;
}

ul.topmenu li:last-child a {
    border: none;
}

ul.secondsubmenu li a {
    border-bottom: 1px solid black;
}

/**********end question********/

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    height: 2em;
    background: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    line-height: 2em;   
    width: 6em;
    text-align: center;
}

ul.submenu, ul.secondsubmenu {
    height: auto;
}

ul.submenu li {
    float: none;
}

ul.secondsubmenu {
    background: yellow;
    color: white;
    height: auto;
    position: absolute;
    left: 12.6em;
    top: 6.9em;
    margin-left: 1px;
}

<nav>
    <ul class="topmenu">
        <li><a href="#">!</a>
        <li><a href="#">!!</a>
            <ul class="submenu">
                <li><a href="#">111</a>
                <li><a href="#">222</a>
                <li><a href="#">333</a>
                    <ul class="secondsubmenu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">222</a>
    </ul>
</nav>

Answer 1

改变这个

ul.topmenu li:last-child a {
    border: none;
}

对此

ul.topmenu > li:last-child a {
    border: none;
}

当你添加这个符号时>它意味着只有第一个 child

example