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

Question

我有以下导航结构......

<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

那是因为所有 a 都是 li 的 child ，而 li 又是 ul 的 child 。

你的顶级 ul 有一个 role="navigation" 所以你可以选择:

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