如何在CSS中使用nth-child来选择某个元素之后的所有元素？

Question

我见过 jQuery 有一个

:gt(n)

解决方案，但是在 CSS 中可以实现相同的行为吗？

我想要的是移动网站的某些列表中的元素不超过 3 个。所以我需要一些类似的东西：

@media(max-width:768px) {
   .list li:gt(3) {
      display:none;
   }
}

我想尝试避免使用 Javascript。由于CSS中似乎不存在

:gt(n)

选择器，那么使用

:nth-child(n)

选择器是否可以实现相同的选择？

Answer 1

是的，您可以使用

:nth-child(n+4)

来做到这一点

您的情况：

@media(max-width:768px) {
   .list li:nth-child(n+4) {
      display:none;
   }
}

你可以看到这个小提琴：http://jsfiddle.net/wgLCH/2/

Answer 2

试试这个：

@media(max-width:768px) {
    .list li:nth-child(n+4) {
      display:none;
   }
}

JSFiddle 示例

更多信息这里

Answer 3

:nth-child(n+3)

就是答案。

Answer 4

p:nth-child(n+4)
{
    background:#ff0000;
}

JSFiddle 示例