使用方法:nth-child(-n+5) 擬似クラス セレクターを使用して、位置が 5 以下の子要素の CSS スタイルを選択します。

位置が 5 以下の子要素の CSS スタイルを選択するための:nth-child(-n 5) 擬似クラス セレクターの使用方法

CSS では、疑似クラス A セレクターは、特定の選択方法を通じて HTML ドキュメント内の特定の要素を選択できる強力なツールです。その中でも、:nth-child() は、特定の位置にある子要素を選択できる疑似クラス セレクターとしてよく使用されます。

:nth-child(n) は HTML の n 番目の子要素と一致し、:nth-child(-n) は HTML の最後から 2 番目の n 番目の子要素と一致します。この 2 つを組み合わせると、:nth-child(-n 5) を使用して、位置が 5 以下の子要素を選択できます。

具体的なコード例は次のとおりです。

HTML コード:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
  <li>列表项7</li>
  <li>列表项8</li>
  <li>列表项9</li>
  <li>列表项10</li>
</ul>

CSS コード:

ul li:nth-child(-n+5) {
  color: red;
}

上記のコードでは、 を選択しました。 ul li サブ要素の位置が 要素内で 5 以下で、テキストの色を赤に設定します。

上記のコードを実行すると、リスト項目 1 からリスト項目 5 までのテキストの色は赤に設定されていますが、リスト項目 6 からリスト項目 10 までのテキストの色はデフォルトのままであることがわかります。

:nth-child() セレクターは、子要素の位置に基づいて選択することに注意してください。 ul 要素に他のタイプのサブ要素 (div、span など) がある場合、それらは影響を受けず、## のみが影響を受けます。 # が選択されます li 要素。したがって、このセレクターを使用するときは、HTML 構造の階層関係に注意する必要があります。

テキストの色に加えて、

:nth-child(-n 5) セレクターを使用して、背景色、フォント サイズなどの他のスタイルを設定することもできます。 color: red を対応するスタイル設定に置き換えるだけです。

つまり、:nth-child(-n 5) 擬似クラス セレクターを使用すると、位置が 5 以下の子要素を選択し、それらに特定の CSS スタイルを適用するだけで、次のことを実現できます。より柔軟な Web デザイン。

以上が使用方法:nth-child(-n+5) 擬似クラス セレクターを使用して、位置が 5 以下の子要素の CSS スタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。