如何在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)选择器来实现相同的选择？

- Digital Ninja

Answer 1

你可以使用:nth-child(n+4)来实现。

在你的情况下：

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

您可以查看此代码片段：http://jsfiddle.net/wgLCH/2/

- Alessandro Incarnati

Answer 2

试试这个：

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

JSFiddle示例

更多信息请在此处查看。

- imbondbaby

---

我认为他需要隐藏第3个元素后的所有元素，而不是仅选择第3个。 - Alessandro Incarnati

@AlexIncarnati 对不起，我看错了...谢谢...已经更新了 :) - imbondbaby

Answer 3

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

JSFiddle 示例

- Moshtaf

Answer 4

:nth-child(n+3)是答案。

- kazy