小编Jho*_*orf的帖子

我在 :first-child 和 :last-child 选择器方面遇到了一个奇怪的问题。当我将其应用于子菜单链接时，它适用于所有子菜单链接。我只需要在子菜单中的第一个和最后一个链接上创建不同的效果。

这是 HTML：

<nav id="menu">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a>
            <ul>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
                <li><a href="#">sub4</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li></li>
    </ul>
</nav>

这是CSS：

nav#menu{ width:100%; text-align:center; z-index:999; }
nav#menu li{ display:inline-block; }
nav#menu li.voltar{ display:none; }
nav#menu a{ display:block; padding:0.75rem 1.3rem; font-size:0.7rem; }
nav#menu li:hover a{ background:#00afef; color:#fff; }
nav#menu li ul{ display:none; }
nav#menu li:hover ul{ display:block; position:absolute; width:12rem; }
nav#menu li ul li{ display:block; }
nav#menu li ul …