Question

我有一个包含动态项目数的列表（菜单）：

<ul id="menu">
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
</ul>

当浏览器显示时，我正在使用媒体查询来对菜单进行不同的样式设置。 1000px宽：

@media screen AND (max-width: 999px) {
    ul#menu li:nth-child(4+) {
          visibility: hidden;
    }
}

显然，这不起作用，但它说明了我想要实现的目标：在第四个之后隐藏任何列表元素。

我意识到有很多方法可以在列表项上使用不同的类来实现这一点，但我想用纯CSS来实现它。

Answer 1

您可以使用:nth-child(n + 4)定位它们：

ul#menu li:nth-child(n + 4) {
    visibility: hidden;  // display: none?
}

您也可以使用:nth-child(-n + 3)仅定位前四个元素。