css3的nth-child选择器的具体探讨
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选择器的具体探讨的更多相关文章
- CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
- CSS3的[att$=val]选择器
1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- css3学习系列之选择器(一)
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器(二)
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 :nth-child()伪类选择器
CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好 的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年 ...
随机推荐
- [设计模式-行为型]访问者模式(Vistor)
一句话 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 概括
- Selenium2+python自动化67-用例失败自动截图【转载】
前言: 装饰器其实就是一个以函数作为参数并返回一个替换函数的可执行函数 上一篇讲到用装饰器解决异常后自动截图,不过并没有与unittest结合,这篇把截图的装饰器改良了下,可以实现用例执行失败自动截图 ...
- pxe+kickstart 无人值守安装CentOS7.1
CentOS6.6下PXE+Kickstart无人值守安装CentOS7.1操作系统 一.简介 1.1 什么是PXE Pxe(Pre-boot Execution Environment,预启动执行 ...
- ES6的特性(译+注解)
介绍 ES6,也叫ECMAScript2015(以下统称ES6),是ECMAScript标准的最新版本.这个标准在2015年6月份被正式批准.ES6是js语言很有意义的一次更新,也是2009年ES5被 ...
- hdu5790
都快忘了在这类题的经典做法了…… 将字符串一个个的插入字典树,在字典树维护好有该前缀串s的最大编号字符串j,我们记作j控制了前缀串s 对于当前的第i个字符串,维护此时有当前每个字符串控制了多少个前缀串 ...
- .NET Core CLI
NET Core 命令 一. 帮助命令 dotnet help 使用情况: dotnet [sdk-options] [command] [command-options] [arguments] 执 ...
- HDU 1556 Color the ball【差分数组裸题/模板】
N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的"小飞鸽"牌电动车从气球a开始到气球b依次给每个气球涂一 ...
- 高效mysql的习惯(程序员版本)
高效的mysql 一定要有主键 如果没有主键: 数据多次读写后可能更离散,有更多随机I/O MySQL复制环境中,如果选择RBR模式,没有主键的update需要读全表,导致复制延迟 好的主键特点: 没 ...
- The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - B King of Karaoke
King of Karaoke Time Limit: 1 Second Memory Limit: 65536 KB It's Karaoke time! DreamGrid is per ...
- [BZOJ2655]calc(拉格朗日插值法+DP)
2655: calc Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 428 Solved: 246[Submit][Status][Discuss] ...