css - 如何在 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;
   }
}

你可以看到这个 fiddle :http://jsfiddle.net/wgLCH/2/