css3的nth-child选择器的详细探讨
前言
在十年前开始的div css布局兴起之时,我就开始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,只有ID选择器,CLASS选择器,以及元素选择器,当然,还包括#id p 这种子选择器.
在那个蛮荒时代,各大浏览器对CSS的支持是相当那啥了.于是,我们为了实现一些效果,比如要控制列表中的最后一个元素,我们会给最后一个元素加上一个CLASS,来方便我们特殊处理.如果要做各行变色这种特殊效果,我们需要各行给每个列加上不同的class.而我们在使用一些CMS系统来制作网站的时候,可能这个系统是不支持这么输出的,那么就麻烦了.我个人很多时候是用图片来实现我向要的效果的.
在html5 css3兴起的当今,CSS的应用的情况已经大大好转了,首先,基本上我们可以不考虑IE6这种古董浏览器了.尤其是我们在做移动端页面的时候,基本上HTML5 CSS3的最新属性,都是可以支持的.
在w3school网站上,对于 nth-child 的解释十分含糊,以至于我一段时间认为,这个东西实在没什么大用.可是,当我研究透了之后,我猛然间发现,这家伙实在是太厉害了啊!!当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的.
有哪些 nth-child ?
nth-child 不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用.
:first-child
:first-of-type
:last-of-type
:only-of-type
:only-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child具体每个有什么差异,可以CSS 选择器参考手册页面进行查询.
今天,我们着重来讲的是 nth-child
nth-child研究开始
为了简单方便,我下面用这种方式在文章中演示我需要的效果
○ | ● | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
如上表所示: ○ 代表没有选中 ● 代表我要选择的元素 下面的数字,表示是第几个
构建DOM结构
代码语言：javascript复制<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>nth-child</title>
</head>
<body>
<ul class="list">
<li>这是列表第1行</li>
<li>这是列表第2行</li>
<li>这是列表第3行</li>
<li>这是列表第4行</li>
<li>这是列表第5行</li>
<li>这是列表第6行</li>
<li>这是列表第7行</li>
<li>这是列表第8行</li>
<li>这是列表第9行</li>
<li>这是列表第10行</li>
</ul>
</body>
</html>开始实践CSS代码,为方便研究,我们现给一段基础CSS代码
代码语言：javascript复制ul.list {width: 500px;margin: 100px auto;}
ul.list li {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}通过上面的css,我们可以在浏览器中看到,这是个LI都变成了橙色的原点.如下表所示
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好,我们开始演示
选择第N个LI
代码语言：javascript复制ul.list li:nth-child(3){background: #000;}如上面的CSS所示,如果要选择第三个,就写3即可.
这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有需要,都可以分别订制的.
如果是第一个,或者最后一个,写法还可以更改为
代码语言：javascript复制/* 第一个 */
ul.list li:first-child{background: #000;}
/* 最后一个 */
ul.list li:last-child{background: #000;}这里需要说明一下,那就是,这里的数字,和JS或者其他编程语言是不一样的.一般的编程语言是从0开始为第一个,而这里,可能是顾及我们一般的csser的编程基础可能不时很好,所以,1就是1,而不是1是0.
选择前三个
● | ● | ● | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(-n 3){background: #000;}这是选择前三个的方法.
选择从第四个开始到最后
○ | ○ | ○ | ● | ● | ● | ● | ● | ● | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(n 4){background: #000;}选择第四个到第八个
○ | ○ | ○ | ● | ● | ● | ● | ● | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(n 4):nth-child(-n 8){background: #000;}这里,其实就是把前面两种方法给集成了一下.
选择奇数行
● | ○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n 1){background: #000;}这里,nth-child提供了一种简写的方法
ul.list li:nth-child(odd){background: #000;}选择偶数行
○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n){background: #000;}这里,nth-child也提供了一种简写的方法
ul.list li:nth-child(even){background: #000;}选择369等三倍数行
○ | ○ | ● | ○ | ○ | ● | ○ | ○ | ● | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n){background: #000;}选择258等三倍数行
○ | ● | ○ | ○ | ● | ○ | ○ | ● | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n 2){background: #000;}选择14710等三倍数行
● | ○ | ○ | ● | ○ | ○ | ● | ○ | ○ | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n 1){background: #000;}通过上面几个例子,应该对倍数行,这种需要,全部理解了吧,再来一个例子
选择 510 等五倍数行
○ | ○ | ○ | ○ | ● | ○ | ○ | ○ | ○ | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(5n){background: #000;}下面来点高级的
选择第三个到第九个之间的奇数行(不包括39)
○ | ○ | ○ | ○ | ● | ○ | ● | ○ | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
怎么做呢?看好了
代码语言：javascript复制ul.list li:nth-child(2n 1):nth-child(n 4):nth-child(-n 8){background: #000;}好,就是组合上面的多种条件,来达到我们需要的选择范围.
选择第三个到第九个之间的奇数行(包括39)
○ | ○ | ● | ○ | ● | ○ | ● | ○ | ● | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(2n 1):nth-child(n 3):nth-child(-n 9){background: #000;}通过上面的两个例子,应该学会了,怎么样组合多种条件,来选择了.
再复杂一点
选择3位倍数 1的(1/4/7/10),其中的偶数
○ | ○ | ○ | ● | ○ | ○ | ○ | ○ | ○ | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ul.list li:nth-child(3n 1):nth-child(2n){background: #000;}nth-child总结
通过上面的各种例子,相信大家把没个例子都实践一遍之后,就能够深入的理解了.在实际的项目中,多多去运用,那么,便会逐渐的了然于胸了.
重要的是,理解它的语法,再结合你的需求,就基本能解决问题了.
此类选择器拓展
提问,在不知道一共有多少个的情况下,如何选择最后两个??
当你对上面的知识点,了然于胸后,是不是大大的有成就感呢?那么,你知道上面这个问题应该怎么解决吗?
如何选择最后两个
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ● | ● |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好吧,这个,是无法使用 nth-child这个选择器来解决的.
我们需要换一个选择器,这个选择器就是 nth-last-child.
nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child 是从第一个开始计数的,而nth-last-child是从倒数第一个开始计数的
那么上面的问题,就有答案了.
代码语言：javascript复制ul.list li:nth-last-child(-n 2){background: #000;}如何实现反选?
什么是反选,举例,我要选择除了14710等三为倍数的数字之外的其他选项,如下表所示:
○ | ● | ● | ○ | ● | ● | ○ | ● | ● | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
好玩了,这里我们需要再引入一个新的选择:not()
代码如何实现呢?
代码语言：javascript复制ul.list li:not(:nth-child(3n 1)){background: #000;}把你的条件,放在:not()的括号当中,就能够实现选择了.
好,我们再换一个例子.我们选择除了最后一个的其他所有.
用反选的方法选择除了最后一个的其他所有.
● | ● | ● | ● | ● | ● | ● | ● | ● | ○ |
|---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
方法1
代码语言：javascript复制ul.list li:not(:nth-last-child(1)){background: #000;}方法2
代码语言：javascript复制ul.list li:not(:last-child){background: #000;}方法2为简写的方法.方法1为原理性写法.
其他补充说明
上面我们的DOM结构使用了ul>li*10这种结构,也就是说,在这种结构里面,是没有处理li之外的同级元素的.如果有其他元素是什么情况呢?
如果有其他元素的话,其他元素也会算在排队序列里面.因此,我们需要再了解两个选择器:nth-of-type(n) :nth-last-of-type(n).
这两个,就只计算相同的元素了.里面的语法呢,和nth-child是完全一致的.所以,这里我就不再详细的论述了.下面给一段例子,便于大家参考掌握
补充说明的演示DOM结构
代码语言：javascript复制<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl class="dl">
<dt>第1个dt</dt>
<dd>第1个dd</dd>
<dt>第2个dt</dt>
<dd>第2个dd</dd>
<dt>第3个dt</dt>
<dd>第3个dd</dd>
<dt>第4个dt</dt>
<dd>第4个dd</dd>
<dt>第5个dt</dt>
<dd>第5个dd</dd>
</dl>
</body>
</html>要实现的效果如下,选择dt的偶数和dd的奇数,
DT用圆形演示 DD用矩形演示
○ | ■ | ● | □ | ○ | ■ | ● | □ | ○ | ■ |
|---|---|---|---|---|---|---|---|---|---|
1dt | 1dd | 2dt | 2dd | 3dt | 3dd | 4dt | 4dd | 5dt | 5dd |
补充说明的CSS演示
代码语言：javascript复制dl.dl {width: 500px;margin: 100px auto;}
dl.dl dt {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
dl.dl dd {width: 30px;height: 30px;border-radius: 5px;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
dl.dl dt:nth-of-type(2n){background: #000;}
dl.dl dd:nth-of-type(2n 1){background: #06f;}最后总结
CSS3提供的这些强大的选择器,可以让我们在具体的项目当中,灵活的运用.正是因为这些美好的CSS3属性,让我们前端工程师对于自己的工作是越来越喜爱了.
最后,让我们动员起来,让那些停留在windows xp系统的家人朋友都升级系统吧,就算不升级系统,也可以使用chrome等浏览器,如果这些浏览器也用不喜欢,推荐他们使用搜狗浏览器或者360等双核浏览器吧.总而言之,浏览器越新,我们的日子越好过.
FungLeo原创,转发请保留版权申明以及首发地址:http://blog.csdn.net/FungLeo/article/details/50813881
