html – 选择潜在无限子项列表的第n个子项

概述我有一个网格布局 – 每行4列.我正在使用CSS网格布局. 假设可能存在无限数量的项目. <div class="grid"> <div class="item"></div> <div class="item"></div> <!-- ... --></div> 如果项目数量可能无限,我怎么能选择每行的两个中间项目.例如,对于前三行,我需要选择： n-child(2), 我有一个网格布局 – 每行4列.我正在使用CSS网格布局.

假设可能存在无限数量的项目.

<div >    <div ></div>    <div ></div>    <!-- ... --></div>

如果项目数量可能无限,我怎么能选择每行的两个中间项目.例如,对于前三行,我需要选择：

n-child(2),n-child(3),n-child(6),n-child(7),n-child(10),n-child(11)

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

解决方法 您可以使用.item：nth-​​child(4n 2)来定位每四个孩子(从2个孩子开始)和.item：nth-​​child(4n 3)以每四个孩子为目标(从第3个孩子开始) .这是一个例子：

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

<div >    <div >1</div>    <div >2</div>    <div >3</div>    <div >4</div>    <div >5</div>    <div >6</div>    <div >7</div>    <div >8</div>    <div >9</div>    <div >10</div>    <div >11</div>    <div >12</div></div>

总结

以上是内存溢出为你收集整理的html – 选择潜在无限子项列表的第n个子项全部内容，希望文章能够帮你解决html – 选择潜在无限子项列表的第n个子项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。