53

.rowブロック内にクラスを持つ最初の3つの要素を非表示にしようとしています.container。

私がやっていることは、最初のすべてを非表示にすることです。次に、を使用し.rowて最初の3つを表示しようとしています。.row.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>

ここで2つの問題があります。

  1. 行3が表示されません、n番目の子を間違った方法で使用していますか？
  2. すべてを非表示にしてから、必要なn個の最初の要素を表示する特定のルールを作成するよりも良い方法はありますか？cssに最初の3つ.rowを表示してから、他のすべてを非表示にする方法はあり.rowますか？

ありがとう。

4

4 に答える 4

78

  1. あなたは.notarow最初の子供としてを持っているので、あなたはあなたの:nth-child()公式でそれを説明しなければなりません。そのため.notarow、最初.rowの子は親全体で2番目の子になります。したがって、2番目から4番目までを数える必要があります。

     .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

また、Giovanniのソリューションのように、このようなものも機能する可能性があります。

.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は最初のn個の要素を表示します」が、質問は今は反対のようです（最初のn個の要素を非表示にします）

:nth-child(n+4)

^これは、私が探していたものを探している場合に機能します

于 2020-04-02T22:24:46.450 に答える