CSS3伪类选择器：nth-child()用法详解
作者：用户
本文讲的是CSS3伪类选择器：nth-child()用法详解，
CSS3的出现无疑给前端开发人员带来了巨大的优势，今天我们着重介绍CSS3中一个新出现的强大伪类选择器：nth：child（）；为了方便大家理解，我今天会通过展示曾经做过的项目页面，让大家直观清晰的了解这一伪类选择器的功能和使用技
CSS3的出现无疑给前端人员带来了巨大的优势，今天我们着重介绍CSS3中一个新出现的强大伪类选择器：nth：child（）；为了方便大家理解，我今天会通过展示曾经做过的项目页面，让大家直观清晰的了解这一伪类选择器的功能和使用技巧
1.首先大家了解下该伪类的语法法：
：nth-child(an+b)
ps:可惜的是该伪类选择器不支持ie浏览器，当要兼容ie浏览器的时候，我们只有每一个li给它们添加类名了
2.这是我们要实现的页面效果
先写好代码
&div class="topone-ul"&
&ul class="toponeul"&
&a href="#"&
&div class="topone-img"&&/div&
&p&APP设计&/p&
&a href="#"&
&div class="topone-img"&&/div&
&p&网页设计&/p&
&a href="#"&
&div class="topone-img"&&/div&
&p&交互设计&/p&
&a href="#"&
&div class="topone-img"&&/div&
&p&LOGO设计&/p&
&a href="#"&
&div class="topone-img"&&/div&
&p&VI设计&/p&
.topone-ul {
margin-top: 60
width: 470
height: 80
.toponeul li {
margin-right: 40
height: 100%;
text-align:
.toponeul li:nth-child(5) {
margin-right: 0
.toponeul li a {
line-height: 50
从代码中可以看出我们用的是&ul&&/ul&&li&&/li&标签，其中每一个li中的图标我是用的雪碧图，整体放在一张图片中，作为背景图，通过移动位置，添加到对应得li中，
现在要把该雪碧图作为背景图放到每一个&li&&/li&中，该怎么办呢？？？
是要给每一个&li&&/li&都添加一个类名吗？？这样太麻烦啦！
现在我们就有一个很好地办法，利用CSS3中：nth-child()来给每一&li&&/li&中添加背景
1.首先第一个&li&&/li&中放入背景可以这样写
.toponeul li:nth-child(1) .topone-img {
height: 25
background: url(../images/high/sprite.png) no-
background-position: -44px 0
:nth-child(1)指的就是.toponeul下面的第一&li&&/li&
以此类推：第二个，第三个，第四个，第五个
.toponeul li:nth-child(2) .topone-img {
height: 25
background: url(../images/high/sprite.png) no-
background-position: -68px 0
.toponeul li:nth-child(3) .topone-img {
height: 25
background: url(../images/high/sprite.png) no-
background-position: -91px 0
.toponeul li:nth-child(4) .topone-img {
margin-left: 15
height: 25
background: url(../images/high/sprite.png) no-
background-position: 4px 0
.toponeul li:nth-child(5) .topone-img {
height: 25
background: url(../images/high/sprite.png) no-
background-position: -19px 0
下面介绍下此伪类选择器的第二种写法：倍数写法
:nth-child(an)
如li:nth-child(3n)、li:nth-child(5n)、li:nth-child(2n)············分别指3倍、5倍、2倍的li。
li:nth-child(3n){background:#000;} 意思是把第3、第6、第9、…、所有3的倍数的li的背景设为黑色
下面介绍下此伪类选择器的第三种写法：倍数分组匹配
:nth-child(an+b) 与 :nth-child(an-b)
li:nth-child(3n+1){background:#000;}
意思是把第1、第4、第7、…、每3个为一组的第1个LI的背景设为黑色
li:nth-child(3n+5){background:#000;}
意思是把 第5、第8、第11、…、从第5个开始每3个为一组的第1个LI的背景设为黑色
li:nth-child(5n-1){background:#000;}
意思是把第5-1=4、第10-1=9、…、第5的倍数减1个LI的背景设为黑色
li:nth-child(3n±0){background:#000;}
相当于(3n)的背景设为黑色
li:nth-child(±0n+3){background:#000;}
相当于(3)的背景设为黑色
下面介绍下此伪类选择器的第五种用法：奇偶匹配
:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
表格奇偶数行定义样式就可以写成
.table & tr:nth-child(&strong&even&/strong&) & td {background-color: #000;}
（偶数行）意思是把第2、第4、第6、…、每2个为一组的LI的背景设为黑色
.table & tr:nth-child(&strong&&em&odd&/em&&/strong&) & td {background-color: #000;}
（奇数行） 意思是把第1、第3、第5、…、每2个为一组的LI的背景设为黑色
好了，现在是不是对CSS3：
：nth-child()伪类选择器已经很理解了呢，现在大家可以快捷又方便的实现自己想要的效果了！
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索设计
，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！404 Not Found
The requested URL /q/8277/ was not found on this server.css选择器问题？：nth-child(2)和：nth-child(4)的hover就行。1.3的hover不行？_百度知道
css选择器问题？：nth-child(2)和：nth-child(4)的hover就行。1.3的hover不行？
：nth-child(2)和：nth-child(4)的hover就行。1.3的hover不行。。为什么？？
我有更好的答案
麻烦贴源代码不要贴图，你想让我们手动输一遍代码？再说你又没定义1的hover
没定义1的hover，定义了3的但是不行
采纳率：57%
第一个子孩子的hover，你根本就没写。第三个的hover，你写成 border:1 试试
为您推荐：
其他类似问题
css选择器的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&!DOCTYPE html&
p:nth-child(3n+0)
background:#ff0000;
&h1&这是标题&/h1&
&p&第一个段落。&/p&
&p&第二个段落。&/p&
&p&第三个段落。&/p&
&p&第四个段落。&/p&
&p&第五个段落。&/p&
&p&第六个段落。&/p&
&p&第七个段落。&/p&
&p&第八个段落。&/p&
&p&第九个段落。&/p&
&p&&b&注释：&/b&Internet Explorer 不支持 :nth-child() 选择器。&/p&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
why?我明明看到是ok的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
为什么我的有用。。。。。。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。CSS3 选择器nth-child()问题，谢绝抢答，求懂的大神。_百度知道
CSS3 选择器nth-child()问题，谢绝抢答，求懂的大神。
不要抢答，不要抢答！不要去复制别人的，我知道这问题很简单，但是我刚刚学习就是不懂。下面的 我初次学习CSS3，选择器这里，怎么样才能让 第一个DIV是蓝色，第二个是橙色，第三个是绿色，而第三个DIV里面的 3-1、3-2 没有样式。下面的代码运行了之后，第三个...
百度知道提问把代码格式个打乱了，不是我搞得，看起来比较费劲，请谅解。另外，这个问题刚刚我提交了一遍，被一个家伙给抢答了，然后就不推送了，知道怎么解决的，能提供正确答案，可以点击我发的问题里面找到这个问题，一起回答一下，我一起采纳 ，一共510财富值，谢谢了，也请不能帮我解决问题的大哥不要抢了。
我有更好的答案
nth-child()括号里面的顺序号是指“兄弟姐妹”之间的序号，并不是整个家族不分辈分的序号。在你的代码中，第一个div和第二个div是兄弟关系，它们的序号是1和2，所以它们分别获得了第1个和第2个样式，而3-1和3-2这两个div则是前两个div的“侄子”（它们外面所套的那个div则是它们的“父亲”），所以它们的序号会重新分配为1和2，并分别匹配第1和第2个样式。听懂没有？改成这样就行：&style&body&div:nth-child(1)&{background:#78caf1; /*蓝*/}body&div:nth-child(2)&{background:#ffc04c; /*橙*/}div&div:nth-child(1)&{background:#33bf51; /*绿*/}&/style&
采纳率：82%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}