Question

我有一堆宽度为50％的div标签，这使得它们可以放在2个标签宽的网格中。我真的很难定义交替的背景颜色，以产生类似于棋盘的效果。正如你在Fiddle中看到的那样，无论我尝试过哪些食谱，所有颜色都位于同一侧，因此出于这个问题的目的，我已经恢复到（奇数）和（偶数）。

我无法在备用div上指定特定的类，因为每个块的内容都是通过Wordpress查询生成的。

由于

HTML

<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>

CSS

div {
  width: 50%;
  height 100px;
  padding: 15px;
  color: white;
  box-sizing: border-box;
  margin: 0;
  float: left;
}
div:nth-child(odd) { background: red; }
div:nth-child(even) { background: blue; }

Answer 1

让所有这些div都以蓝色背景开头，然后使用

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

每四个中选择第一个和第四个。

https://jsfiddle.net/fobc6fs5/3/

Answer 2

试试这个

＆＃13;

div {
  width: 50%;
  height 100px;
  padding: 15px;
  color: white;
  box-sizing: border-box;
  margin: 0;
  float: left;
}
div:nth-child(4n+1), div:nth-child(4n+4) { background: red; }
div:nth-child(4n+2), div:nth-child(4n+3) { background: blue; }

＆＃13;

<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>

＆＃13;

：交替颜色的第n个孩子食谱

2 个答案: