css - 使用 CSS 选择一系列列表项

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)仅定位前四个元素。

演示：http: //jsfiddle.net/yhsE9/3/