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

純粋なCSSは、要素色のn％3サイクル効果を実現します

フロントエンドの開発では、n％3の色サイクルの効果を実現するなど、要素の位置に従って色を動的に割り当てる必要があることがよくあります。この記事では、CSSのみを使用してこの効果を達成する方法について説明します。

HTML構造が次のとおりであると仮定します。

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

目標は、P要素の色をその位置に応じて周期的に変化させることです（n％3結果）：n％3 == 0は色1、n％3 == 1は色2、n％3 == 2は色3です。

まず、CSS変数を定義して、色値を保存します。

 。容器 {
  -color1：#fff;
  -color2：＃da3838;
  -Color3：RGB（49、196、23）;
}

次に、 nth-child pseudo-classとcalc() var()を使用して、色を動的に適用します。

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

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

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

コードでは、 3n 1 3n 2 3n 3それぞれn％3 == 0、n％3 == 1、n％3 == 2を満たす要素を選択し、 var()関数を介して事前定義された色を適用します。このようにして、各P要素の背景色は、 .containerの位置に応じて自動的に環化され、純粋なCSSのn％3色ループ効果はJavaScriptなしで実現できます。

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