:nth-of-type 擬似クラス セレクターを使用して、同じ型の要素内の特定の位置にあるスタイルを選択します。

:nth-of-type 擬似クラス セレクターを使用して、同じ型の要素内の特定の位置のスタイルを選択します。

CSS では、多くの場合、同じタイプの要素のスタイルを選択します。要素内の特定の位置にスタイルを設定します。たとえば、リスト内の 3 番目の要素ごとに特別なスタイルが必要です。この場合、:nth-of-type 擬似スタイルを使用できます。この目的を達成するためのクラスセレクター。

:nth-of-type 擬似クラス セレクターは、要素の型と位置に基づいてターゲット要素を選択できます。その構文は次のとおりです。

:nth-of-type(n)

ここで、n は位置を示すパラメータで、特定の数値またはキーワード (奇数など) を指定できます。奇数の位置、偶数は偶数の位置を表します。

以下は具体的な例です:

HTML コード:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
  <li>第五个元素</li>
  <li>第六个元素</li>
  <li>第七个元素</li>
  <li>第八个元素</li>
</ul>

CSS コード:

li:nth-of-type(3n) {
  color: red;
}

上記のコードでは、次を使用します:nth-of - type(3n) セレクターを使用して、リスト内の 3 つおきの要素を選択し、色を赤に設定します。このセレクターの規則に従って、このスタイルは 3 番目、6 番目、および 9 番目の要素に適用されます。

奇数の位置にある要素を選択したい場合は、:nth-of-type(odd) セレクターを使用できます。サンプル コードは次のとおりです:

CSS コード:

li:nth-of-type(odd) {
  background-color: lightgray;
}

この方法では、リスト内の奇数番号の要素の背景色が明るい灰色に設定されます。

:nth-of-type セレクターをリストに適用するだけでなく、段落やタイトルなどの他のタイプの要素にも使用できます。

つまり、:nth-of-type 擬似クラス セレクターを使用すると、同じ型の要素内の特定の位置をスタイル設定するという目的を達成できます。特定のパラメータを設定することで、目的の場所を選択し、そこに特定のスタイルを適用できます。これは、多数の同様の要素のスタイルを扱う場合に非常に役立ち、開発効率が向上します。

以上が:nth-of-type 擬似クラス セレクターを使用して、同じ型の要素内の特定の位置にあるスタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。