选择儿童的潜在的无限列表第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

下面是一个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>