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

概述假设我有一个列表的以下结构：<ul> <li></li><li></li> <li></li><li></li> </ul> 并且每个< li>是50％宽度所以我希望每两个都有这样的背景颜色：<ul> &

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

并且每个< 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 – 在CSS3中使用nth-child()选择双打全部内容，希望文章能够帮你解决html – 在CSS3中使用nth-child()选择双打所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1122816.html