如何为网格布局设置重复的背景色序列

Question

我有一个使用Bootstrap的网格布局，我希望每个网格项的背景颜色是四种颜色中的一种。例如，假设我有4种颜色：红色、蓝色、黄色和绿色。我希望第一个网格项目的背景颜色是红色，然后是蓝色，然后是绿色，黄色，红色，蓝色，绿色等。我可以用CSS/SASS实现这一点吗？

<div class="blog-wrapper">
<h1 class="blog-title">Soapbox Blog</h1>

<div class="container blog-list-container">
<div class="row">
{% for post in site.posts %}
<div class="col-lg-6 col-xl-4 mt-4">
<a href="{{ post.url }}">
<div class="post-thumbnail h-100"
style="background-image: url('{{site.baseurl}}/assets/images/{{ post.image }}');">
<!-- Content -->
<div class="text-white text-start d-flex align-items-center rgba-black-strong p-5">
<div>
<h5>{{ post.format | capitalize  }}</h5>
<h3 class="card-title pt-2"><strong>{{ post.title }}</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fus minus error nisi architecto nulla ipsum dignissimos. amet, consectetur adipisicing elit. Repellat fus minus error nisi architecto nulla ipsum dignissimos.Odit sed qui, dolorum!.
</p>
</div>
</div>
</div>
</a>
</div>  <!-- end of col -->
{% endfor %}
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of wrapper -->

Answer 1

您可以为此使用类型的第n个：

您可以添加任意数量的元素。

.container div:nth-of-type(4n + 1) {
background-color: red;
}
.container div:nth-of-type(4n + 2) {
background-color: blue;
}
.container div:nth-of-type(4n + 3) {
background-color: yellow;
}
.container div:nth-of-type(4n + 4) {
background-color: green;
}

<div class="container">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>

Answer 2

只需使用第n个子CSS选择器：

.container :nth-child(1n) {background-color: red;}
.container :nth-child(2n) {background-color: green;}
.container :nth-child(3n) {background-color: blue;}
.container :nth-child(4n) {background-color: yellow;}

<div class="container">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>