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的孩子，是ul的孩子。

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

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

Answer 2

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

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

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

CSS：隐藏第二深度的ul的第一个列表项

2 个答案: