我有一个网格布局使用引导和我想有每个网格项目的背景颜色四种颜色之一。 例如，假设我有4种颜色:红，蓝，黄和绿。 我希望第一个网格项目的背景颜色是红色，然后是蓝色，然后是绿色，黄色，红色，蓝色，绿色等。我能用CSS/SASS实现这一点吗？
您可以为此使用nth-of-type:
您可以添加任意多的元素。
null
.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>
只需使用第n个子CSS选择器:
null
:nth-child(1n) {color: red;}
:nth-child(2n) {color: green;}
:nth-child(3n) {color: blue;}
:nth-child(4n) {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>