html – 在CSS3中使用nth-child()选择双打

发布时间：2020-12-14 22:58:47 所属栏目：资源来源：网络整理

导读：假设我有一个列表的以下结构：并且每个是50％宽度所以我希望每两个都有这样的背景颜色：我可以使用nth-child()CSS选择器来做到这一点,以便最小化代码吗？最佳答案 ul li:nth-child(4n+1),ul li:nth-child(4n+2) { background: #CCC;}ul li:nth-child(4n+

假设我有一个列表的以下结构：


并且每个< li>是50％宽度所以我希望每两个都有这样的背景颜色：


我可以使用’nth-child()’CSS选择器来做到这一点,以便最小化代码吗？


最佳答案

ul li:nth-child(4n+1),ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),ul li:nth-child(4n+4) {
  background: #DDD;
}

这将为您提供从第1和第2开始的每个第4个元素作为颜色#CCC和从第3个和第4个开始的每个第4个元素作为#DDD
jsfiddle在这里：http://jsfiddle.net/mU2tn/1/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!