选择孩子的潜在无限列表的第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'rd孩子开始）。这里是例子：

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

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

Answer 2

以下是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>

Answer 3

使用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>