`nth-child()` を使用して CSS 内の N 番目ごとの要素を効率的に選択するにはどうすればよいですか?

CSS の N 番目ごとの要素の選択

CSS の nth-child() セレクターは、その中の特定の子要素をターゲットにする便利な方法を提供します。親要素。ただし、n 番目の子を個別にリストするのは面倒な場合があります。より効率的な方法はありますか?

nth-child() での算術式の使用

nth-child() の真の能力は、算術演算を組み込む機能にあります。 「n」変数を使用した式。この変数は、親要素内の子要素の位置を表します。

4 番目の要素ごとの簡易セレクター

4 つおきの div 要素を選択するには、個々のセレクターを以下:

div:nth-child(4n)

この式は、セレクターが 4 の倍数である任意の div 要素と一致することを意味します。 (例: 0、4、8、12)。

算術演算によるカスタマイズ

n 変数を使用すると、さらにカスタマイズできます。例:

• 2n - 1: 奇数の div 要素 (例: 1、3、5) に一致します。
• 4n 2: 4 の倍数より 2 つ多い位置を持つ div 要素と一致します (例: 2, 6, 10).

算術式の等化

4n と 4n 4 は一見同じように見えますが、そうではありません。 nth-child() は 0 からカウントを開始します。 4n は位置 0、4、8 の要素に一致し、4n 4 は位置 4、8、12 の要素に一致します。

以上が`nth-child()` を使用して CSS 内の N 番目ごとの要素を効率的に選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。