2

疑似セレクターを使用して Web サイトのスタイルを設定し、ティーザーに限られた数の要素 (画像) を表示しようとしています。私はGoogleでいくつかの調査を行っており、nth-child(n)を使用する最も適切な方法を見つけました。しかし、なぜそれがうまくいかないのかわかりませんでした。nth-child(n+5) を使用すると、最初の 4 つの画像が表示され、他のすべての画像は表示されません。まったく機能しません。私はそれを良い方法だと考えていますか、それとも問題はもっと複雑ですか?

コードは次のようになります。

.node-teaser .field-type-image  img {
    float: left;
    width: 24.6%;
    padding:0.2%;
}

.node-teaser .field-type-image img:nth-child(n+5){
    display: none;
}
4

1 に答える 1

3

要素の数のみを指定する-には、表記の前に (マイナス記号)を使用する必要があります。n

あなたの場合、4つの要素だけを表示したい場合：

.node-teaser .field-type-image img{
    display: none;
}

.node-teaser .field-type-image img:nth-child(-n+4){
    display: block;
}

なんで？

「-n」値を使用するのは少し奇妙に思えます。最終結果が負の場合は一致しないため、再び正の値に戻すには方程式に追加する必要があるからです。結局のところ、これはかなり巧妙なテクニックです。これを使用して、「-n+3」で「最初の n 要素」を選択できます。

-0 + 3 = 3 = 3 番目の要素

-1 + 3 = 2 = 2 番目の要素

-2 + 3 = 1 = 1 番目の要素

-3 + 3 = 0 = 一致なし

ここで完全な非常に優れた記事を読んでください: http://css-tricks.com/how-nth-child-works/

于 2013-04-03T16:12:18.090 に答える