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

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

DDD

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

原创

354人浏览过

如何使用纯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>
  <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 {
      /* 其他样式 */
  }
}

登录后复制

我们的目标是让每个

元素的背景颜色按照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)选择器：