Html 如何使用CSS隐藏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:nth-of-type(1),
#test li:nth-of-type(2),
#test li:nth-of-type(3) {
  display:none;
}

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

从链接的MDN文档：

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

使用CSS3：

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

请记住，除IE8和更早版本外，所有主要浏览器都支持此属性

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