純css實現元素顏色N%3循環效果
前端開發中，常需根據元素位置動態分配顏色，例如實現顏色按N%3循環的效果。本文將介紹如何僅使用CSS實現此效果。
假設html結構如下：
<div class="container"> <p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p></p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</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顏色循環效果。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
