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>

当浏览器宽度 < 1000 像素时，我正在使用媒体查询以不同方式设置菜单样式:

@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/