如何显示块的前N个元素，并隐藏在CSS其他人呢？(How to show the first N

我试图隐藏其类中的第3个元素.row块内.container 。

我在做什么是隐藏所有的.row第一，然后我想显示第3 .row使用.row:nth-child(-n+3)

这里的jsfiddle： http://jsfiddle.net/z8fMr/1/

我这里有两个问题：

1. 第3行不显示，我使用的第n个孩子在错误的道路？
2. 难道还有比隐藏一切，然后创建一个特定的规则，以显示我想要的N个第一要素一个更好的做法？ 有没有在CSS的方式只显示前3 .row ，然后隐藏所有其他.row ？

谢谢。

Answer 1:

1. 你有一个.notarow作为第一个孩子，所以你必须考虑你在:nth-child()的公式。 正因为如此.notarow ，你的第一个.row成为父母的第二个孩子的整体，所以你要算从第二开始到第四：

    .row:nth-child(-n+4){ display:block; } 

   更新小提琴

2. 你在做什么是好的。

Answer 2:

你甚至都不需要CSS3选择：

.row + .row + .row + .row {
    display: none;
}

这应该在IE7甚至工作。
更新小提琴

Answer 3:

此外，像乔瓦尼的解决方案，这样的事情也工作。

.container > .row:nth-child(3) ~ .row {
    /* this rule targets the rows after the 3rd .row */
    display: none;
}

文章来源: How to show the first N elements of a block and hide the others in css?