如何使用CSS隐藏UL的前3个孩子

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>

我想隐藏前三项.我写了下面的代码,但它只隐藏了第一个孩子而不是下两个.

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

我如何隐藏其他两个呢？

Answer 1

您可以使用第n个子选择器:

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

从链接的MDN文档:

如果元素是其父元素的前三个子元素之一,则匹配