CSS3 选择器 伪类选择器介绍

CSS3的:nth选择器 
这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 

:fist-child选择某个元素的第一个子元素； 
:last-child选择某个元素的最后一个子元素； 
:nth-child()选择某个元素的一个或多个特定的子元素； 
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； 
:nth-of-type()选择指定的元素； 
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算； 
:first-of-type选择一个上级元素下的第一个同类子元素； 
:last-of-type选择一个上级元素的最后一个同类子元素； 
:only-child选择的元素是它的父元素的唯一一个了元素； 
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素； 
:empty选择的元素里面没有任何内容。

1、:first-child 

:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，我们就可以使用:first-child来实现： 

.demo li:first-child {background: green; border: 1px dotted blue;} 
在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式 

.demo li.first {background: green; border: 1px dotted blue;} 
其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，请看效果： 

IE6不支持:first-child选择器。 

2、:last-child 

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如： 

.demo li:last-child {background: green; border: 2px dotted blue;} 
这个效果和以前在列表上的“last”的class是一样的 

.demo li.last {background: green; border: 2px dotted blue;} 
他们效显示的效果都是一致的，如图所示； 

3、: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"选择器。 

4、:nth-last-child() 
":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。我们来看几个实例： 

.demo li:nth-last-child(4) {background: lime;} 
上面代码表示选择倒数第四个列表项，效果如下： 

其中":nth-last-child(1)"和":last-child"所起作用是一样的，都表示的是选择最后一个元素。 

另外":nth-last-child()"也可以像“:nth-child()”一样，可以使用表达式来选择特定元素，下面我们来看几个特殊的表达式所起的作用 

:nth-last-child(2n),这个表示的是从元素后面计算，选择的是偶数个数，从而反过来说就是选择元素的奇数，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。如： 

.demo li:nth-last-child(2n) {background: lime;} 
.demo li:nth-last-child(even) {background: lime;} 
等于 
.demo li:nth-child(2n+1) {background: lime;} 
.demo li:nth-child(2n-1) {background: lime;} 
.demo li:nth-child(odd) {background: lime;} 
请看效果： 

:nth-last-child(2n-1)这个选择器刚好跟上面的相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数位了，这个前面的":nth-child(2n)"之类是相同的效果，如：
.demo li:nth-last-child(2n+1) {background: lime;} 
.demo li:nth-last-child(2n-1) {background: lime;} 
.demo li:nth-last-child(odd) {background: lime;} 
等于： 
.demo li:nth-child(2n) {background: lime;} 
.demo li:nth-child(even) {background: lime;} 
效果如下 

看了这几个实例，大家都知道":nth-last-child()"和"nth-child()"使用方法是一样的，只不过他们的区别是“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

.demo p:nth-of-type(even) {background-color: lime;} 
其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器