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

Question

我见过jQuery有一个:gt(n)解决方案,但是可以在CSS中实现相同的行为吗？

我想要的是移动网站在某些列表中不超过3个元素.所以我需要的是:

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

我想尝试避免使用Javascript.由于:gt(n)选择器似乎不存在于CSS中,使用: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/

为了更好地了解如何使用nth-child看一下这个链接:http://nthmaster.com/