我试图在 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>
这里有两个问题:
- 第 3 行未显示;我是否以错误的方式使用了第 nth-child?
- 有没有比隐藏所有内容然后创建特定规则来显示我想要的前 n 个元素更好的做法? CSS 中是否有一种方法可以只显示前 3 个
.row
,然后隐藏所有其他.row
?
最佳答案
您有一个
.notarow
作为第一个 child ,因此您必须在:nth-child()
公式中考虑到这一点。由于.notarow
,您的第一个.row
成为父项的第二个子项,因此您必须从第二个开始计数到第四个:.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>
你做的很好。
关于css - 如何在 css 中显示 block 的前 N 个元素并隐藏其他元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11922165/