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

Posted 2023-03-06

【中文标题】css nth-child() 检查板模式 [关闭]

【英文标题】：css nth-child() check board pattern [closed]

【发布时间】：2018-11-04 23:40:33

【问题描述】：

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

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

【问题讨论】：

向我们展示您的尝试。

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

【参考方案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>