使用 CSS 选择器制作棋盘图案

Question

我有一个 div 元素的列表，我当前使用 CSS 浮点数在两列中显示这些元素。我想"alternate"这些元素的边框颜色。我在引号中使用了 alternate，因为我真正想要的是每个 "row" 中的两个 div 交替出现。下面是我想要的最终状态示例：

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

如果我简单地使用 nth-child（偶数）或 nth-child（奇数），我会在垂直方向的每一列中获得相同的颜色，例如：

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

我想要定位的 divs 位于 WordPress 循环内，所以我对标记没有太多控制权（这就是为什么我希望使用 CSS nth-child).不幸的是，没有任何标记可以让我在 dividual "row".

中定位每个

是否有任何类型的 nth-child 模式允许我对无限数量的项目执行类似 blue[1], green[2],blue[2],etc 的操作？

我通常对 CSS 有很好的理解，但这有点伤了我的脑袋，所以在此先感谢您的帮助！

Answer 1

你应该像这样使用第 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 元素中的每一个元素执行任何操作。

Answer 2

看起来你正在制作一个简单的棋盘，所以如果你将所有东西都设置为绿色，你只需要覆盖所有需要为蓝色的东西。 nth-child can also accept a fomula that gives an n or multiple of n with an offset.

当你给它们编号时，请注意在右栏中你有 4 和 8（接下来是 12），所以你需要每 4 个元素，并且在左边你有 1 和 5（接下来是 9），所以你还需要第 4 个加一（1 在技术上是 4*0+1）。

There is a fiddle here that demos it，但相关代码是：

/* 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;
}

并给出：

Answer 3

你可以只做蓝色 1 和绿色 2:

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

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

并确保将 ID 设置为 1 和 2，这样它才能正常工作

Answer 4

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

对于 4 x 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>

使用 CSS 选择器制作棋盘图案

Making a checkerboard pattern using CSS Selectors

css

css-selectors