使用方法: 位置が 3n+1 の条件を満たす同じ型の要素の CSS スタイルを選択するための、型の n 番目 (3n+1) 疑似クラス セレクター

使用方法:nth-of-type(3n 1) 擬似クラス セレクターを使用して、位置が 3n 1 条件を満たす同じタイプの要素の CSS スタイルを選択します。具体的なコード例は必須です

#CSS では、特定の位置の要素にさまざまなスタイルを適用する必要があることがよくあります。 :nth-of-type(3n 1) 擬似クラス セレクターは、同じ型の要素間で 3n 1 条件を満たす位置を選択し、それらにスタイルを適用する便利な方法を提供します。

: nth-of-type(3n 1) セレクターの動作原理は、3n 1 の位置を満たす同じ型の要素を選択することです。このうち、nは整数を表し、3n1は1、4、7などの条件を満たす位置を表します。

次に、具体的なコード例を使用して、:nth-of-type(3n 1) セレクターの使用方法を説明します。

まず、同じタイプの 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>

次に、3n 1 条件を満たす要素 (つまり、位置 1、4、7 など) にスタイルを適用したいと思います。 :nth-of-type(3n 1) セレクターを使用して、このタスクを実行できます。たとえば、これらの要素の背景色を赤、フォントの色を白に設定したいとします。コードは次のとおりです。

li:nth-of-type(3n+1) {
  background-color: red;
  color: white;
}

上記のコードを CSS ファイルに追加し、CSS ファイルを HTML ファイルに関連付けます。ブラウザを開いてページを表示すると、3n 1 条件を満たす位置の要素に対応するスタイルが適用されていることがわかります。

上記のコード例と説明を通じて、:nth-of-type(3n 1) 擬似クラス セレクターを使用して 3n 1 を満たす同じ型の要素を選択する方法を理解できたと思います。条件を設定し、それに CSS を適用します。このテクニックは実際のプロジェクトでもよく使われているので、ぜひ参考にしてみてください。

以上が使用方法: 位置が 3n+1 の条件を満たす同じ型の要素の CSS スタイルを選択するための、型の n 番目 (3n+1) 疑似クラス セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。