选择潜在无限子女列表的第n个孩子

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-child(7),nth-child(10),nth-child(11)

我可以将样式硬编码到一个特定的数字,假设没有无限数,但如果有办法动态地做,我宁愿这样做.

Answer 1

你可以.item:nth-child(4n+2)用来瞄准每四个孩子(从2个孩子开始)并.item:nth-child(4n+3)瞄准每四个孩子(从第3个孩子开始).这是一个例子:

.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>