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

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

我正在做的就是隐藏所有.row首先，然后我尝试显示前 3 个.row通过使用.row:nth-child(-n+3)

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

.row {
  display: none;
}

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

<div class="content">

  <div class="notarow">I'm not a row and I must remain visible</div>
  <div class="row">Row 1</div>
  <div class="row">Row 2</div>
  <div class="row">Row 3</div>
  <div class="row">Row 4</div>
  <div class="row">Row 5</div>
  <div class="row">Row 6</div>

</div>

我这里有两个问题：

1. 第3行不显示；我是否以错误的方式使用 nth-child ？
2. 有没有比隐藏所有内容然后创建特定规则来显示我想要的第 n 个元素更好的做法？ CSS 有没有办法只显示前 3 个.row然后隐藏所有其他的.row?

1. 你有一个.notarow作为第一个孩子，所以你必须在你的生活中考虑到这一点:nth-child()公式。正因为如此.notarow，你的第一个.row成为父级的第二个子级，因此您必须从第二个开始数到第四个：

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

   更新了小提琴 http://jsfiddle.net/BoltClock/z8fMr/2

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

   <div class="content">
       <div class="notarow">I'm not a row and I must remain visible</div>
       <div class="row">Row 1</div>
       <div class="row">Row 2</div>
       <div class="row">Row 3</div>
       <div class="row">Row 4</div>
       <div class="row">Row 5</div>
       <div class="row">Row 6</div>
   </div>

2. 你正在做的事情很好。