html - 如何使用 CSS 隐藏 UL 的前 3 个 child

Question

我有以下结构:

<ul id="test">
    <li class="myclass">Item1</li>
    <li class="myclass">Item2</li>
    <li class="myclass">Item3</li>
    <li class="myclass">Item4</li>
    <li class="myclass">Item5</li>
</ul>

我想隐藏前三项。我写了下面的代码，但它只隐藏了第一个 child 而不是接下来的两个。

#test li:first-child
{
    display:none;
}

如何隐藏另外两个？

Answer 1

您可以使用 nth-child选择器:

#test li:nth-child(-n+3) {
    display: none;
}

来自链接的 MDN 文档:

Matches if the element is one of the first three children of its parent