如何使用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和更早版本，所有主流瀏覽器都支持此屬性。