如何显示块的前N个元素并隐藏css中的其他元素？

Question

我试图隐藏.row在块内有类的前3个元素.container.

我正在做的是隐藏所有的.row第一个,然后我试图.row通过使用显示前三个.row:nth-child(-n+3)

jsfiddle:http: //jsfiddle.net/z8fMr/1/

我有两个问题:

1. 第3行没有显示,我是否以错误的方式使用了n-child？
2. 有没有比隐藏所有内容然后创建特定规则以显示我想要的第一个元素更好的做法？在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;
}