使用CSS选择器制作棋盘格纹理

Question

我有一个div元素的列表，目前使用CSS浮动显示为两列。我想要“交替”这些元素的边框颜色。 我使用的是引号中的alternate，因为我真正想要的是每行中的两个div元素交替显示。以下是我最终想要的示例：

1blue   2green
3green  4blue
5blue   6green
7green  8blue

如果我仅使用nth-child（even）或nth-child（odd），则会在垂直列中获得相同的颜色，如下所示：

1blue 2green
3blue 4green
5blue 6green
7blue 8green

我想要定位的div位于WordPress循环内部，因此我无法控制标记（这就是为什么我希望使用CSS nth-child）。不幸的是，没有任何标记可以让我定位每个单独的“行”。

是否有任何nth-child模式，可以让我做类似于blue[1]，green[2]，blue[2]等的事情，对于无限数量的项目？

我通常对CSS有很好的理解，但这让我有点困惑，所以提前感谢您的任何帮助！

- Michael R. Murphy

Answer 1

看起来您正在制作一个简单的棋盘，所以如果您将每个元素都设置为绿色，那么您只需要覆盖需要变为蓝色的元素。nth-child也可以接受一个公式，给出n或n的倍数和偏移量。

由于您已经对它们进行了编号，请注意右列中有4和8（下一个将是12），因此您需要每第四个元素，在左列中有1和5（下一个将是9），因此您还需要第四个元素再加一（1实际上是4*0+1）。

这里有一个演示它的代码片段, 但相关的代码如下：

/* Color everything green */
.checkerboard div {
    width:45%;
    display:inline-block;
    background-color:green;
}

/* Then color the appropriate divs blue */
.checkerboard div:nth-child(4n+1),
.checkerboard div:nth-child(4n) {
    background-color:blue;
}

并返回：

- user764357

---

这正是我所需要的。谢谢！ - Michael R. Murphy

Answer 2

我制作了一个CSS棋盘生成器：https://codepen.io/RilDev/pen/mdXegEL

对于一个4×4的棋盘，它将生成以下代码：

<div class="board">
  <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>

<style>
  .board {
    display: grid;
    grid-template-columns: repeat(4, 64px);
  }

  .square {
    width: 64px;
    height: 64px;
    background: black;
  }

  .square:nth-child(8n + 1),
  .square:nth-child(8n + 3),
  .square:nth-child(8n + 6),
  .square:nth-child(8n + 8) {
    background: white;
  }
</style>

- RilDev

Answer 3

你可以将蓝色设为1，绿色设为2：

1:nth-of-type(2n+1){
   background-color: green;
}

2:nth-of-type(2n){
   background-color: blue;
}

并确保将id设置为1和2，以便它可以正常工作

- too easy

Answer 4

你应该这样使用nth-child

div:nth-child(1){…your code here…}
div:nth-child(2){…your code here…}
div:nth-child(3){…your code here…}
div:nth-child(4){…your code here…}
div:nth-child(5){…your code here…}
div:nth-child(6){…your code here…}
div:nth-child(7){…your code here…}
div:nth-child(8){…your code here…}

通过这个方法，您可以对您的8个div元素做任何事情。

- Ahmadbaba46

---

如果有第9个元素，或第10个或第100个元素会发生什么？ - user764357

你应该像这样将数字直接传递到nth-child的括号中，例如"div:nth-child(100)。 - Ahmadbaba46

那个乐高风暴家伙是一位非常厉害的程序员。 - user764357

Nth-child(n4) 的意思是它将按照每 4 个 div 进行遍历。例如，它将为第 4 个 div、之后的第 8 个 div 和第 12 个 div 添加样式。无论你有多少个 div，它都会按照每 4 个进行遍历。 - Ahmadbaba46

@LegoStormtroopr 咳咳，我相信正确的形容词形式是“hoopy”。就像，“Zaphod只是个家伙，你知道吗？他是一个hoopy frood。” - tckmn