CSS3 伪类选择器 :nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择:
:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择,n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
:nth-child()可以定义他的值(值可以是整数,也可以是表达式),如上面所示,用来选择特定的子元素,对于这个我们直接看实例,比我说的更好理解。
:nth-child(3),选择某元素下的第三个子元素,(这里的3可以是你自己需要的数字),比如说,我需要选择列表中的第三个li元素,那么我们可以直接这样使用:
.demo li:nth-child(3) {background: lime;}
效果如下所示:
这种不式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法。
:nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的"li",如:
.demo li:nth-child(n) {background: lime;}
等于
.demo li {background: lime;}
他其实是这样计算的
n=0 --》 没有选择元素
n=1 --》 选择第一个li,
n=2 --》 选择第二个li,后在的依此类推,这样下来就选中了所有的li
请看效果:
请注意了,这里的“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。
:nth-child(2n),这中方式是前一种的变身,我们可以选择n的2倍数,当然其中“2”可以换成你自己需要的数字,如:
.demo li:nth-child(2n) {background: lime;}
等于
.demo li:nth-child(even) {background: lime;}
我们来看一下其计算的过程:
n=0 --》 2n=0 --》 没有选中任何元素,
n=1 --》 2n=2 --》 选择了第二个li
n=2 --》 2n=4 --》 选择了第四个li,后面的依此类推
如果是“2n”这样跟我们以使用"even"命名class定义样式,所起到的效果是一样的,如图所示:
“:nth-child(2n)”也等于":nth-child(even)"效果。
:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了人是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如:
.demo li:nth-child(2n-1) {background: lime;}
我们来看看其实现过程
n=0 --》 2n-1=-1 --》 也没有选中任何元素,
n=1 --》 2n-1=1 --》 选择第一个li
n=2 --》 2n-1=3 --》 选择第三个li,后面的依此类推
其实实现这种奇数效果,我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果
:nth-child(n+5)这个选择器是选择从第五个元素开始选择,这里的数字你可以自己定义,如:
.demo li:nth-child(n+5) {background: lime;}
按前面的计算方法,我们来看看,
n=0 --》 n+5=5 --》 选中第5个li
n=1 --》 n+5=6 --》 选择第6个li,后面的就不列出来了,原理一样
你可以使用这种方法选择你需要开始选择的元素位置,也就是说换了数字,起始位置就变了,看下在的效果图:
:nth-child(-n+5)这种选择器刚好和上面的选择器相反,这个是选择第5个前面的,如:
.demo li:nth-child(-n+5) {background: lime;}
如果不清楚怎么一回事,你只要计算一下就明白了
n=0 --》 -n+5=5 --》 选择了第5个li
n=1 --》 -n+5=4 --》 选择了第4个li
n=2 --》 -n+5=3 --》 选择了第3个li
n=3 --》 -n+5=2 --》 选择了第2个li
n=4 --》 -n+5=1 --》 选择了第1个li
n=5 --》 -n+5=0 --》 没有选择任何元素
从上面的计算方法中,大家很清楚的知道是怎么得来的,最后我们一起看看效果吧:
:nth-child(4n+1)这种方法是实现隔几选一的效果,比如我们这里是隔三选一,如果你把"4"换成别的数字那就是另外的一种隔法了,比如这个实例
.demo li:nth-child(4n+1) {background: lime;}
我们主要来看其计算出来的结果
n=0 --》4n+1=1 --》选择了第一个li
n=1 --》4n+1=5 --》选择了第五个li
n=2 --》4n+1=9 --》选择了第九个li
效果如下
IE6-8和FF3-浏览器不支持":nth-child"选择器。
原文链接:http://edu.cnzz.cn/201303/86605120.shtml
W3School参考:http://www.w3school.com.cn/cssref/css_selectors.asp
CSS3 伪类选择器 :nth-child()的更多相关文章
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )
<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- CSS3伪类选择器:nth-child()(nth-child(odd)/nth-child(even))
nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li>< ...
- CSS3伪类选择器
first-line 设置首行样式 first-letter 设置首字母样式 before 在某元素前插入内容并设置内容样式 after 在某元素后插入内容并设置内容样式 <!DOCTYP ...
- CSS3伪类选择器 图示
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
随机推荐
- codeforces 439 E. Devu and Birthday Celebration 组合数学 容斥定理
题意: q个询问,每一个询问给出2个数sum,n 1 <= q <= 10^5, 1 <= n <= sum <= 10^5 对于每一个询问,求满足下列条件的数组的方案数 ...
- MHI ,运动历史图像的的获取[下载自CSDN]
#include "cv.h" #include "highgui.h" #include "stdlib.h" #include &quo ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- Eclipse下快速打开本地文件插件EasyExplorer(转)
EasyExplorer 是一个类似于 Windows Explorer的Eclipse插件,它可以帮助你在不退出Eclipse的环境下浏览本地文件系统,类似的插件也有很多,但是本人喜欢使用这个版本 ...
- AutoResetEvent和ManualResetEvent理解 z
AutoResetEvent和ManualResetEvent用于多线程之间代码执行顺序的控制,它们继承自WaitHandle,API相同,但在使用中还是有区别的. 每次使用时虽然理解了,但由于没有去 ...
- $.ajax获取不到数据问题解决
$("#updateflow").click(function () { $.ajaxSetup({ contentType: "application/json;cha ...
- java反射机制详解 及 Method.invoke解释
JAVA反射机制 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方法的功能称为ja ...
- asp.net读取txt并导入数据库
源地址:http://www.cnblogs.com/hfzsjz/p/3214649.html
- 使用Aspose.Words把 word转成图片
Document doc = new Document("f:\\333.doc"); ImageSaveOptions iso = new ImageSaveOptions(Sa ...
- 2013年山东省第四届ACM大学生程序设计竞赛-最后一道大水题:Contest Print Server
点击打开链接 2226: Contest Print Server Time Limit: 1 Sec Memory Limit: 128 MB Submit: 53 Solved: 18 [Su ...