html - 如何在html中循环为div提供2种不同的背景颜色

Question

我的 html 中有 2 种背景颜色框，我的 php 中有 1 个循环框。

我的问题是我有 4 行，每行有 2 个不同的颜色框，对于第一行，我尝试从 css 管理它，但我无法为第二行颠倒顺序，请查看下面我想要的快照。

抱歉我的英语不好，但试着理解我在说什么？

4 boxes in 2 row

在第一行中，我通过 css 深色和浅色背景颜色进行管理，但我无法在第二行中颠倒顺序，我的意思是在第二行中，第一个框的颜色为浅色，而其他的则先深后浅。

请告诉我如何从 css 管理它。

这是我的 css 和 html 代码

.teamColumn {
  float: left;
  width: 25%;
  position: relative;
  height: 192px;
  background-color: #1a1e2a;
  margin-bottom: 2px;
}

.teamColumn:after {
  position: absolute;
  content: "";
  bottom: 0px;
  right: 0;
  width: 76px;
  height: 91px;
}

.teamColumn:nth-child(2n+2) {
  background-color: #212634;
}

<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>

请给我建议如何处理这个问题。

Answer 1

正如上面的答案所述，如果您能够包装 div，那可能是最好的解决方案。如果没有，并且您只有两行，那么这样的事情可能会起作用:

.teamColumn{
float:left; 
width:25%; 
position:relative; 
height:192px; 
background-color:#1a1e2a;
margin-bottom:2px;
}
.teamColumn:after{
	position:absolute;
	content:"";
	bottom:0px;
	right:0;
	width:76px;
	height:91px;
}
.teamColumn:nth-child(8n+7){background-color:#212634;}
.teamColumn:nth-child(8n+5){background-color:#212634;}
.teamColumn:nth-child(8n+2){background-color:#212634;}
.teamColumn:nth-child(8n+4){background-color:#212634;}

<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>