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

2022-01-10 00:00:00 css-selectors css pseudo-class

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

I am trying to hide the first 3 elements having the class .row inside the block .container.

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

What I'm doing is hiding all the .row first, and then I am trying to display the first 3 .row by using .row:nth-child(-n+3)

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

jsfiddle here: 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. Row 3 is not displayed, am I using nth-child in the wrong way?
  2. Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in css to just display the first 3 .row and then hide all the other .row ?

谢谢.

推荐答案

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

  1. You have a .notarow as the first child, so you have to account for that in your :nth-child() formula. Because of that .notarow, your first .row becomes the second child overall of the parent, so you have to count starting from the second to the fourth:

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

更新小提琴

.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>

你做的很好.

相关文章