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

前端之家收集整理的这篇文章主要介绍了html – 在CSS3中使用nth-child()选择双打前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

并且每个< 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/

猜你在找的HTML相关文章