css nth-child() 检查板模式 [关闭]答案

【问题标题】：css nth-child() check board pattern [closed]css nth-child() 检查板模式 [关闭]
【发布时间】：2018-11-04 23:40:33
【问题描述】：

想象有一个四列 n 行的网格。每隔一个元素应该有一个不同的颜色。有点像the basic pattern，但只有四列。

我需要一个带有display: flex 的单亲父母。我尝试调整链接的示例，但无法正常工作。

【问题讨论】：

向我们展示您的尝试。
Imagine having a grid with four columns and n rows --> 如果我们没有很好的想象力怎么办:)

标签： css flexbox css-selectors

【解决方案1】：

这很简单，因为图案重复了 2 行，每行 4 行，您只需将样式应用到 8n + i 即可获得方格图案：

.flex {
  display: flex;
  width: 400px;        /* width of four squares */
  flex-direction: row;
  flex-wrap: wrap;
}

.square {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

.square:nth-child(8n+1),
.square:nth-child(8n+3),
.square:nth-child(8n+6),
.square:nth-child(8n+8) {
    background:black;
}
.square:nth-child(8n+2),
.square:nth-child(8n+4),
.square:nth-child(8n+5),
.square:nth-child(8n+7) {
    background:white;
}

<div class="flex">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

【讨论】：