html - CSS：隐藏具有第二个深度的ul的第一个列表项

Question

我有以下导航结构……</p>

<ul role="navigation">
    <li class="page_item page-item-2">
        <a href="#">Sections</a>
        <ul class="children">
            <li class="page_item"><a href="#">One</a></li>
            <li class="page_item"><a href="#">Two</a></li>
            <li class="page_item"><a href="#">Three</a></li>
        </ul>
    </li>
    <li class="page_item page-item-6">
        <a href="#">About</a>
        <ul class="children">
            <li class="page_item"><a href="#">Contact</a></li>
            <li class="page_item"><a href="#">Members</a></li>
            <li class="page_item"><a href="#">Become Member</a></li>
            <li class="page_item"><a href="#">Whatever</a></li>
        </ul>
    </li>
</ul>

如何隐藏<a>外部列表元素中每个元素的第一次出现？就我而言，我说的<a href="#">Sections</a>是<a href="#">About</a>

我想

ul li > a { display:none; }

或者

ul > li > a { display:none; }

应该做的伎俩，但它隐藏了一切。

Answer 1

那是因为所有的as 都是 s 的孩子，li它们都是 s 的孩子ul。

您的顶层ul有一个role="navigation"，因此您可以选择：

ul[role="navigation"] > li > a { display:none; }

Answer 2

我认为最简单和最有效的方法是添加类 like .hidden {display: none;}，但您也可以向外部添加一个类ul，然后：

.ul-outer-class > li > a { display: none; }

它也比使用属性选择器更有效。