colors - 使用 CSS 或 JS 替换超过 2 种背景颜色

Question

我目前有几个<section>重复的元素，我想分配 5 种不同的交替背景颜色。

现在我正在使用:nth-of-type(#n)，但我几乎可以肯定我没有正确使用它，并且正在发生一些奇怪的行为，其中一种颜色不会在循环中重复。

这是一个示例代码：

HTML

<section>
    <article>This is A1</article>
</section>
<section>
    <article>This is A2</article>
</section>
<section>
    <article>This is A3</article>
</section>
<section>
    <article>This is A4</article>
</section>
<section>
    <article>This is A5</article>
</section>

CSS

section:nth-of-type(1n) {
    background-color: red;
}

section:nth-of-type(2n) {
    background-color: orange;
}

section:nth-of-type(3n) {
    background-color: blue;
}

section:nth-of-type(4n) {
    background-color: green;
}

section:nth-of-type(5n) {
    background-color: gray;
}

有没有更有效的方法来做到这一点？我更愿意将其保留在 CSS 的范围内，但我不介意添加 JS 指令。

这是JFiddle 演示。

非常感谢！

Answer 1

你很近。只需将您的第 n 个类型计数更改为以下。

section:nth-of-type(5n+1) {
    background-color: red;
}

section:nth-of-type(5n+2) {
    background-color: orange;
}

section:nth-of-type(5n+3) {
    background-color: blue;
}

section:nth-of-type(5n+4) {
    background-color: green;
}

section:nth-of-type(5n+5) {
    background-color: gray;
}

这是 JFiddle。