选择可能无限的孩子列表中的第 n 个孩子答案

【问题标题】：Selecting nth-child of potentially infinite list of children选择可能无限的孩子列表中的第 n 个孩子
【发布时间】：2018-03-05 02:18:56
【问题描述】：

我有一个网格布局 - 每行 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)

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

【问题讨论】：

标签： html css math sass css-grid

【解决方案1】：

您可以使用.item:nth-child(4n+2) 定位每四个孩子（从第二个孩子开始）和.item:nth-child(4n+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>

【讨论】：

【解决方案2】：

使用nth-child(xN+y) 语法...

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 25px;
}

.box {
  padding: 1em;
  border: 1px solid grey;
}

.container :nth-child(4n+2) {
  background: red;
}

.container :nth-child(4n+3) {
  background: blue;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

【解决方案3】：

以下是js解决方案：

var items = document.getElementsByClassName('item');
for (i = 0; i < items.length; i++) {
  if(i % 2 === 0 && i % 4 === 0) {
    var el1 = items[i + 1];
    var el2 = items[i + 2];
    if (el1)
      el1.style.backgroundColor = "red";
    if (el2)
      el2.style.backgroundColor = "red";
  }
}

.grid {
  display:grid;
  grid-template-columns: 100px 100px 100px 100px;
}

.item {
  border:1px solid black;
  padding:20px;
  margin:4px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：