选择孩子的潜在无限列表的第n个孩子
问题描述:
我有一个网格布局 - 每行4列。我正在使用CSS网格布局。选择孩子的潜在无限列表的第n个孩子
说可能有无数的项目。
<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)
我可以硬编码样式到一个特定号码假设就不会有一个无限数量,但如果有办法动态地做到这一点,我宁愿这样做。
答
您可以使用.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>
答
以下是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>
答
使用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>