使用 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

您可以尝试使用 :even 和 :odd pseudo-classes

Answer 2

您的模式每 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>

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

Changing background colors in a specific sequence with CSS

css

css-selectors