html - 选择可能无限的 child ​​列表的第 n 个 child

Question

我有一个网格布局——每行 4 列。我正在使用 CSS 网格布局。

假设可能有无限数量的元素。

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... -->
</div>

如果元素的数量可能是无限的，我如何选择每行中间的两个元素。例如，对于前三行，我需要选择:

nth-child(2)，nth-child(3)，nth-child(6)，nth-子(7)，第 n 个子(10)，第 n 个子(11)

假设不会有无限数量，我可以将样式硬编码到特定数量，但如果有办法动态地做到这一点，我宁愿这样做。

Answer 1

您可以使用 .item:nth-child(4n+2) 定位每四个 child (从第 2 个 child 开始)和 .item:nth-child(4n+ 3) 以每四个 child 为目标(从第 3 个 child 开始)。这是示例:

.item:nth-child(4n+2),
.item:nth-child(4n+3) {
  color: red;
  background-color: yellow;
}

<div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
</div>