如何在css3选择器的两列中交替使用颜色?

If I have this code

如果我有这个代码

#list>div {
  font-size: 18px;
  float: left;
  margin: 0 10px 10px 0;
  width: 150px;
}

#list>div:nth-child(2n+1) {
  clear: left;
}

#list>div:nth-child(odd) {
  background-color: red;
}

#list>div:nth-child(even) {
  background-color: blue;
}

<div id="list">
  <div class="list-item">A</div>
  <div class="list-item">B</div>
  <div class="list-item">C</div>
  <div class="list-item">D</div>
  <div class="list-item">E</div>
  <div class="list-item">F</div>
  <div class="list-item">G</div>
  <div class="list-item">H</div>
  <div class="list-item">I</div>
  <div class="list-item">J</div>
</div>

This displays like

这将显示如

A B
C D
E F 
G H 
I J

Which is good, however, I want the background colors to be like

这很好，但是，我想要背景颜色像?

red blue
blue red
red blue
blue red
red blue

However the above code makes each column the same color. Is there a pure-css3 way I can do this?

然而，上面的代码使每个列都是相同的颜色。有一种纯粹的css3方法可以做到这一点吗?

2 个解决方案

#1

#list>div {
  font-size: 18px;
  float: left;
  margin: 0 10px 10px 0;
  width: 150px;
}

#list>div:nth-child(2n+1) {
  clear: left;
}

#list>div:nth-child(4n+1), #list>div:nth-child(4n) {
  background-color: red;
}

#list>div:nth-child(4n+2), #list>div:nth-child(4n+3) {
  background-color: blue;
}

<div id="list">
  <div class="list-item">A</div>
  <div class="list-item">B</div>
  <div class="list-item">C</div>
  <div class="list-item">D</div>
  <div class="list-item">E</div>
  <div class="list-item">F</div>
  <div class="list-item">G</div>
  <div class="list-item">H</div>
  <div class="list-item">I</div>
  <div class="list-item">J</div>
</div>

#2

Check this out:

看看这个:

#list>div {
  font-size: 18px;
  float: left;
  margin: 0 10px 10px 0;
  width: 150px;
  background-color: red;
}


#list>div:nth-child(4n+1) {
  background-color: blue;
}

#list>div:nth-child(4n) {
  background-color: blue;
}

#list>div:nth-child(2n+1) {
 clear:left 
}

<div id="list">
  <div class="list-item">A</div>
  <div class="list-item">B</div>
  <div class="list-item">C</div>
  <div class="list-item">D</div>
  <div class="list-item">E</div>
  <div class="list-item">F</div>
  <div class="list-item">G</div>
  <div class="list-item">H</div>
  <div class="list-item">I</div>
  <div class="list-item">J</div>
</div>