純粋なCSSを使用して、n％3モードでの交互の要素色の効果を実現する方法は？

純粋なCSSは、要素の色の色の交互の代替を実装します

この記事では、純粋なCSSを使用して、要素インデックスに基づいてn％3モードでn％3モードでの交互の要素色の効果を実現する方法を紹介します。この手法は、視覚的に魅力的なリストやグリッドレイアウトを作成する場合に非常に便利です。

次のHTML構造があるとします。

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

およびCSS変数定義：

 。容器 {
  -color1：#fff;
  -color2：＃da3838;
  -Color3：RGB（49、196、23）;
  p {
      /*その他のスタイル*/
  }
}

私たちの目標はそれぞれを作ることです<p>要素の背景色は<code>n%3の残りの部分に従って周期的に変化します。

• 要素1： --color1
• 要素2： --color2
• 要素3： --color3
• 要素4： --color1
• 等々...

CSSのnth-child Pseudo-Classはこれを達成できます。 nth-childの構文を巧みに適用することにより、特定の要素を選択して、さまざまなスタイルを適用できます。

解決：

 .container p：nth-​​child（3n 1）{
  背景色：var（ -  color1）;
}

.container p：nth-​​child（3n 2）{
  背景色：var（ -  color2）;
}

.container p：nth-​​child（3n 3）{
  背景色：var（ -  color3）;
}

このCSSコードはnth-child(3n x)セレクターを使用します。

• 3n 1すべてのインデックスを3つの残りの3（1、4、7、...）で除算します。
• 3n 2 2すべてのインデックスを3つの要素で割ったものを2つの残りの2つ（2、5、8、...）で分割します
• 3n 3すべてのインデックスを3つの要素で割って、残り0（3、6、9、...）を持つ3つの要素を分割します）

上記のCSSコードを通じて、それを正常に実装しました<p>要素の背景色の円形の交互の効果は<code>n%3モード要件を満たしています。この方法はシンプルで効率的であり、純粋なCSSを使用して完全に実装されており、JavaScriptの追加オーバーヘッドを回避します。

以上が純粋なCSSを使用して、n％3モードでの交互の要素色の効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。