Question

我目前有几个＆lt;部分＆gt; 重复自己的元素，我想分配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 demo。

非常感谢！

Answer 1

你很亲密。只需将您的nth-of-type计数更改为以下内容。

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;
}

Here's the JFiddle

使用CSS或JS替换2种以上的背景颜色

1 个答案: