问题描述
我试图隐藏块 .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>
我这里有两个问题:
- 第 3 行不显示,是不是我用错了 nth-child?
- 有没有比隐藏所有内容然后创建特定规则来显示我想要的前 n 个元素更好的做法?css 中有没有办法只显示前 3 个 .row 然后隐藏所有其他 .row ?
- Row 3 is not displayed, am I using nth-child in the wrong way?
- 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 ?
谢谢.
推荐答案
您有一个 .notarow 作为第一个孩子,因此您必须在 :nth-child() 公式中考虑这一点.由于那个 .notarow,你的第一个 .row 成为了父级的第二个孩子,所以你必须从第二个到第四个开始计数:
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>
你做的很好.