使用CSS更改特定顺序的背景颜色

Question

我正在建造一个砖石网格，这是3列。我需要每个网格项目有一个背景颜色应用到它通过CSS，但在一个特定的顺序:

• 蓝、绿、粉
• 绿色、粉色、蓝色
• 粉色、蓝色、绿色
(重复)

我尝试了下面的方法，但它并没有完全让我到达那里:

.masonry_item:nth-child(3n+1) {
background: blue;
}
.masonry_item:nth-child(3n+2) {
background: green;
}
.masonry_item:nth-child(3n+3) {
background: pink;
}

下面是HTML的简化版本:

<div class="masonry_container">
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
</div>

Answer 1

你的图案每重复9个元素而不是3个。

.masonry_item:nth-child(9n+1),
.masonry_item:nth-child(9n+6),
.masonry_item:nth-child(9n+8){
background: blue;
}
.masonry_item:nth-child(9n+2),
.masonry_item:nth-child(9n+4),
.masonry_item:nth-child(9n+9){
background: green;
}
.masonry_item:nth-child(9n+3),
.masonry_item:nth-child(9n+5),
.masonry_item:nth-child(9n+7){
background: pink;
}

.masonry_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
gap: 10px;
}

<div class="masonry_container">
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
<div class="masonry_item"></div>
</div>

Answer 2

你可以尝试使用:even和:odd伪类