如何使用纯CSS实现元素颜色按n%3模式交替的效果？-css教程-PHP中文网

如何使用纯CSS实现元素颜色按n%3模式交替的效果？

DDD

发布： 2025-03-25 10:14:10

原创

398人浏览过

如何使用纯css实现元素颜色按n%3模式交替的效果？

纯CSS实现元素颜色循环交替

本文介绍如何利用纯CSS，基于元素索引，实现元素颜色按n%3模式循环交替的效果。这种技术在创建视觉上吸引人的列表或网格布局时非常有用。

假设我们有以下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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/appmall%E5%BA%94%E7%94%A8%E5%95%86%E5%BA%97">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679968212304.png" alt="AppMall应用商店">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/appmall%E5%BA%94%E7%94%A8%E5%95%86%E5%BA%97">AppMall应用商店</a>
                            <p>AI应用商店，提供即时交付、按需付费的人工智能应用服务</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AppMall应用商店">
                                <span>56</span>
                            </div>
                        </div>
                        <a href="/ai/appmall%E5%BA%94%E7%94%A8%E5%95%86%E5%BA%97" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AppMall应用商店">
                        </a>
                    </div>
                
  <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>

登录后复制

以及CSS变量定义：

.container {
  --color1: #fff;
  --color2: #da3838;
  --color3: rgb(49, 196, 23);
  p {
      /* 其他样式 */
  }
}

登录后复制

我们的目标是让每个<p></p>元素的背景颜色按照n%3的余数循环变化：

第1个元素：--color1
第2个元素：--color2
第3个元素：--color3
第4个元素：--color1
以此类推...

CSS的nth-child伪类可以实现这一目标。通过巧妙地运用nth-child的语法，我们可以选择特定的元素并应用不同的样式。

解决方案：

.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)选择器：