53

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

我正在做的是隐藏所有第.row一个，然后我试图.row通过使用显示前 3 个.row:nth-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？

谢谢。

4

4 回答 4

78

  1. 你有一个.notarow作为第一个孩子，所以你必须在你的: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>

  2. 你在做什么很好。

于 2012-08-12T12:34:54.800 回答
23

你甚至不需要 CSS3 选择器：

.row + .row + .row + .row {
    display: none;
}

这甚至在 IE7 中也应该有效。
更新的小提琴

于 2013-01-13T17:28:54.363 回答
9

此外，就像乔瓦尼的解决方案一样，这样的事情也可以奏效。

.container > .row:nth-child(3) ~ .row {
    /* this rule targets the rows after the 3rd .row */
    display: none;
}
于 2016-04-21T11:39:13.963 回答
1

我通过谷歌搜索“css show first n elements”找到了这个答案，但现在的问题似乎是相反的（隐藏前 n 个元素）

:nth-child(n+4)

^ 如果您正在寻找我正在寻找的东西，这将起作用

于 2020-04-02T22:24:46.450 回答