nth-child（1st，3rd，6th，8th）等

Question

我试图用n-child制作棋盘效果。

所以它是一个四块宽的网格。第一，第三，第六和第八等需要是不同的颜色。

我需要超过100块才能这样做，所以如果可能的话我宁愿不把它们全部写出来！

有没有一种简单的方法可以达到这个目的？

Answer 1

您可以使用even和odd

的组合

＆＃13;

＆＃13;

.square {
  width:50px;
  height:50px;
  display:inline-block;
  margin-left:-4px;
  margin-top:-4px;
}
  .checkerboard .row:nth-child(odd) .square:nth-child(odd), .checkerboard .row:nth-child(even) .square:nth-child(even) {
    background:black;
  }
  .checkerboard .row:nth-child(odd) .square:nth-child(even), .checkerboard .row:nth-child(even) .square:nth-child(odd) {
    background:red;
  }

＆＃13;

<div class="checkerboard">
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
  <div class="row">
    <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>
</div>

＆＃13;

＆＃13;

＆＃13;