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

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

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

来自链接的MDN文档：

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

Answer 2

#test li:nth-of-type(1),
#test li:nth-of-type(2),
#test li:nth-of-type(3) {
  display:none;
}

Answer 3

使用CSS3：

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

请注意，除IE8及更早版本外，所有主流浏览器均支持此属性。

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

3 个答案: