選擇孩子的潛在無限列表的第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>