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

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

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

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

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

最佳答案
  1. ul li:nth-child(4n+1),ul li:nth-child(4n+2) {
  2. background: #CCC;
  3. }
  4. ul li:nth-child(4n+3),ul li:nth-child(4n+4) {
  5. background: #DDD;
  6. }

这将为您提供从第1和第2开始的每个第4个元素作为颜色#CCC和从第3个和第4个开始的每个第4个元素作为#DDD

jsfiddle在这里:http://jsfiddle.net/mU2tn/1/

猜你在找的HTML相关文章