Question

我有多个元素显示左侧浮动以创建4个元素的行。我把它们换成了背景颜色：

div > div { float:left; width:25%; height:50px; background-color:black; }
div > div:nth-child(2n) { background-color:white; }

<div>
  <div id="el1"></div>
  <div id="el2"></div>
  <div id="el3"></div>
  <div id="el4"></div>
  <div id="el5"></div>
  <div id="el6"></div>
  <div id="el7"></div>
  <div id="el8"></div>
  <div id="el9"></div>
  <div id="el10"></div>
  <div id="el11"></div>
  <div id="el12"></div>
</div>

然而，我真正需要的是在黑 - 白 - 黑 - 白和白 - 黑 - 白 - 黑之间交替创建国际象棋棋盘效果。如果可能，我不想改变HTML。所以我真正需要的是每4个元素交替替换的方式。

Answer 1

只需将您的选择器移至2n - ＆gt;之前的选择器2n-1

.board {
  width: 90px;
}

.board div {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

div > div { float:left; width:25%; background-color:black; }
div > div:nth-child(2n-1) { background-color:white; }

<div class="board">
  <div id="el1"></div>
  <div id="el2"></div>
  <div id="el3"></div>
  <div id="el4"></div>
  <div id="el5"></div>
  <div id="el6"></div>
  <div id="el7"></div>
  <div id="el8"></div>
  <div id="el9"></div>
  <div id="el10"></div>
  <div id="el11"></div>
  <div id="el12"></div>
</div>

是否可以与nth-child进行双重交替？

1 个答案: