如何使用纯CSS实现n%3颜色交替效果？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何使用纯CSS实现n%3颜色交替效果？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文介绍如何仅使用CSS样式，实现元素颜色以三色循环交替的效果。 这种效果通常需要巧妙地运用nth-child伪类选择器。

假设HTML结构如下：

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

CSS变量预先定义：

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

目标是让每个元素的颜色按照--color1, --color2, --color3的顺序循环：

<code>元素1: --color1
元素2: --color2
元素3: --color3
元素4: --color1
元素5: --color2
元素6: --color3
...</code>

CSS代码实现如下：

.container p {
  background-color: var(--color1); /* 默认颜色 */
}

.container p:nth-child(3n+2) {
  background-color: var(--color2); /* 第二个、第五个... */
}

.container p:nth-child(3n+3) {
  background-color: var(--color3); /* 第三个、第六个... */
}

代码解释：

• .container p 设置所有段落的默认背景色为 --color1。
• .container p:nth-child(3n+2) 选择所有索引为 2、5、8… 的段落（即3的倍数加2），设置其背景色为 --color2。
• .container p:nth-child(3n+3) 选择所有索引为 3、6、9… 的段落（即3的倍数加3），设置其背景色为 --color3。

通过这三行CSS代码，我们便实现了仅用CSS代码，即可完成三色循环交替的样式效果，无需任何JavaScript代码。

好了，本文到此结束，带大家了解了《如何使用纯CSS实现n%3颜色交替效果？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！