如何用純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變量存儲顏色值：

 .container {
  --color1: #fff;
  --color2: #da3838;
  --color3: rgb(49, 196, 23);
}

然後，利用nth-child偽類和calc()函數結合var()函數動態應用顏色：

 .container p:nth-child(3n 1) {
  background-color: var(--color1);
}

.container p:nth-child(3n 2) {
  background-color: var(--color2);
}

.container p:nth-child(3n 3) {
  background-color: var(--color3);
}

代碼中， 3n 1 、 3n 2 、 3n 3分別選擇滿足N%3 == 0、N%3 == 1、N%3 == 2的元素，並通過var()函數應用預定義顏色。 這樣，每個p元素的背景色將根據其在.container中的位置自動循環變化，無需JavaScript即可實現純CSS的N%3顏色循環效果。

以上是如何用純CSS實現元素顏色按n%3交替效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！