css - 如何在 css 中显示 block 的前 N ​​个元素并隐藏其他元素？

Question

我试图在 block .container 中隐藏具有类 .row 的前 3 个元素。

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

jsfiddle 在这里: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？

Answer 1

1. 您有一个 .notarow 作为第一个 child ，因此您必须在 :nth-child() 公式中考虑到这一点。由于 .notarow，您的第一个 .row 成为父项的第二个子项，因此您必须从第二个开始计数到第四个:

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

   Updated fiddle

   .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. 你做的很好。