如何使用CSS

Question

我有以下结构隐藏UL的第3个孩子的：

<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和更早版本，所有主流浏览器都支持此属性。