码迷，mamicode.com
首页 > Web开发 > 详细

css3的nth-child选择器的具体探讨

时间：2017-08-02 15:36:35      阅读：171      评论：0      收藏：0      [点我收藏+]

标签：addclass   data   pop   http   通过   布局   4行   down   组合   

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结构

<!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代码

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

ul.list li:nth-child(3){background: #000;}

如上面的CSS所看到的,假设要选择第三个,就写3就可以.

这是最简单的.我们能够使用这样的方法,给不同的li加上不同的样式,假设你有须要,都能够分别订制的.

假设是第一个,或者最后一个,写法还能够更改为

/* 第一个 */
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;}

选择3\6\9等三倍数行

○ ○ ● ○ ○ ● ○ ○ ● ○
1 2 3 4 5 6 7 8 9 10 
ul.list li:nth-child(3n){background: #000;}

选择2\5\8等三倍数行

○ ● ○ ○ ● ○ ○ ● ○ ○
1 2 3 4 5 6 7 8 9 10 
ul.list li:nth-child(3n+2){background: #000;}

选择1\4\7\10等三倍数行

● ○ ○ ● ○ ○ ● ○ ○ ●
1 2 3 4 5 6 7 8 9 10 
ul.list li:nth-child(3n+1){background: #000;}

通过上面几个样例,应该对倍数行,这样的须要,全部理解了吧,再来一个样例

选择 5\10 等五倍数行

○ ○ ○ ○ ● ○ ○ ○ ○ ●
1 2 3 4 5 6 7 8 9 10 
ul.list li:nth-child(5n){background: #000;}

以下来点高级的

选择第三个到第九个之间的奇数行(不包含3\9)

○ ○ ○ ○ ● ○ ● ○ ○ ○
1 2 3 4 5 6 7 8 9 10

怎么做呢?看好了

ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;}

好,就是组合上面的多种条件,来达到我们须要的选择范围.

选择第三个到第九个之间的奇数行(包含3\9)

○ ○ ● ○ ● ○ ● ○ ● ○
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是从倒数第一个開始计数的

那么上面的问题,就有答案了.

ul.list li:nth-last-child(-n+2){background: #000;}

怎样实现反选?

什么是反选,举例,我要选择除了1\4\7\10等三为倍数的数字之外的其它选项,例如以下表所看到的:

○ ● ● ○ ● ● ○ ● ● ○
1 2 3 4 5 6 7 8 9 10

好玩了,这里我们须要再引入一个新的选择:not()

代码怎样实现呢?

ul.list li:not(:nth-child(3n+1)){background: #000;}

把你的条件,放在:not()的括号其中,就能够实现选择了.

好,我们再换一个样例.我们选择除了最后一个的其它全部.

用反选的方法选择除了最后一个的其它全部.

● ● ● ● ● ● ● ● ● ○
1 2 3 4 5 6 7 8 9 10

方法1

ul.list li:not(:nth-last-child(1)){background: #000;}

方法2

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结构

<!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演示

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属性,让我们前端project师对于自己的工作是越来越喜爱了.

最后,让我们动员起来,让那些停留在windows xp系统的家人朋友都升级系统吧,就算不升级系统,也能够使用chrome等浏览器,假设这些浏览器也用不喜欢,推荐他们使用搜狗浏览器或者360等双核浏览器吧.总而言之,浏览器越新,我们的日子越好过.

最后,这篇文章我花了三个小时在markdown编辑器里编辑出来,也是非常不easy啊,能够的话,点个赞,留个言鼓舞一下也是好的嘛!!

FungLeo原创,转发请保留版权申明以及首发地址:http://blog.csdn.net/FungLeo/article/details/50813881

css3的nth-child选择器的具体探讨

标签：addclass   data   pop   http   通过   布局   4行   down   组合   

原文地址：http://www.cnblogs.com/yfceshi/p/7274058.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！