DOM 内の位置に基づいて、同じクラス名の要素をスタイル設定するにはどうすればよいですか?

クラス名を使用して特定の要素をターゲットにする: CSS n 番目の子アプローチ

課題: クラス名に基づいて、同じクラス名を持つ要素を選択的にスタイル設定する

解決策: nth-child() または nth-of-type() 擬似セレクターを使用して、要素内の順序位置に従って要素をターゲットにします。親要素。

nth-child() 擬似セレクター

nth-child(n) 擬似セレクターを使用すると、親の n 番目の子である要素のスタイルを設定できます。たとえば、クラス "myclass" の最初の要素をターゲットにするには:

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

2 番目と 3 番目の要素をターゲットにするには、次のセレクターを使用します:

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () Pseudo-Selector

nth-of-type(n) 擬似セレクターは、nth-child() と同様に機能しますが、親内の型に基づいて要素を選択します。これは、親内に同じタイプの要素が複数ある場合に便利です:

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

HTML の例:

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

以上がDOM 内の位置に基づいて、同じクラス名の要素をスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。