純css實現(xiàn)元素顏色循環(huán)交替
本文介紹如何利用純CSS，基于元素索引，實現(xiàn)元素顏色按n%3模式循環(huán)交替的效果。這種技術(shù)在創(chuàng)建視覺上吸引人的列表或網(wǎng)格布局時非常有用。
假設(shè)我們有以下html結(jié)構(gòu)：
<div class="container"> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> <p></p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學(xué)習(xí)筆記（深入）</a>”；</p> </div>
以及CSS變量定義：
.container { --color1: #fff; --color2: #da3838; --color3: rgb(49, 196, 23); p { /* 其他樣式 */ } }
我們的目標是讓每個
元素的背景顏色按照n%3的余數(shù)循環(huán)變化：
- 第1個元素：–color1
- 第2個元素：–color2
- 第3個元素：–color3
- 第4個元素：–color1
- 以此類推…
CSS的nth-child偽類可以實現(xiàn)這一目標。通過巧妙地運用nth-child的語法，我們可以選擇特定的元素并應(yīng)用不同的樣式。
解決方案：
.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); }
這段CSS代碼利用了nth-child(3n+x)選擇器：
- 3n+1 選擇所有索引除以3余數(shù)為1的元素 (1, 4, 7, …)
- 3n+2 選擇所有索引除以3余數(shù)為2的元素 (2, 5, 8, …)
- 3n+3 選擇所有索引除以3余數(shù)為0的元素 (3, 6, 9, …)
通過以上CSS代碼，我們成功地實現(xiàn)了
元素背景顏色的循環(huán)交替效果，滿足了n%3的模式要求。 這種方法簡潔高效，完全使用純CSS實現(xiàn)，避免了JavaScript的額外開銷。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
