CSS3伪类选择器

CSS的伪类语法和别的语法有点不一样，其主要有两种语法表达方式

a、E:pseudo-class{property:value}

a:link{color:red;}

b、E.class:pseudo-class{property:value}

a.selected:hover{color:blue;}

说明：其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值

一、动态伪类：伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，

第一种是我们在链接中常看到的锚点伪类，如":link",":visited";

另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。

先来看最常见的锚点伪类：

.demoa:link{color:gray;}

.demoa:visited{color:yellow;}

.demoa:hover{color:green;}

.demoa:active{color:blue;}

说明：对于这四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。

:hover用于当用户把鼠标移动到元素上面时的效果；

:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）

:focus用于元素成为焦点，这个经常用在表单元素上。

注：对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

二、UI元素状态伪类：我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用：

input[type="text"]:disabled{border:1pxsolid#999;background-color:#fefefe;}

注：这样一来就把页面中禁用的文本框应用了一个不同的样式。IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

三、CSS3的:nth选择器：有人也称这种选择器为CSS3结构类。

1、:fist-child选择某个元素的第一个子元素；

2、:last-child选择某个元素的最后一个子元素；

3、:nth-child()选择某个元素的一个或多个特定的子元素；

4、:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

5、:nth-of-type()选择指定的元素；

6、:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

7、:first-of-type选择一个上级元素下的第一个同类子元素；

8、:last-of-type选择一个上级元素的最后一个同类子元素；

9、:only-child选择的元素是它的父元素的唯一一个了元素；

10、:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

11、:empty选择的元素里面没有任何内容。

1、:first-child用来选择某个元素的第一个子元素。

.demoli:first-child{background:green;border:1pxdottedblue;}

2、:last-child选择是的元素的最后一个子元素。

.demoli:last-child{background:green;border:2pxdottedblue;}

3、:nth-child()可以选择某个的一个或多个特定的子元素，也可以按如下方式进行选择：

:nth-child(length);

:nth-child(n);

:nth-child(n*length);

:nth-child(n+length);

:nth-child(-n+length);

:nth-child(n*length+1);

//上面length为整数

注：IE6-8和FF3-浏览器不支持":nth-child"选择器。

说明：:nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素。:nth-child(3),选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：

.demoli:nth-child(3){background:lime;}

注：这种方式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li"。

.demoli:nth-child(n){background:lime;}

等于

.demoli{background:lime;}

注：请注意了，这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字，如：

.demoli:nth-child(2n){background:lime;}

等于

.demoli:nth-child(even){background:lime;}

注：“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：

.demoli:nth-child(2n-1){background:lime;}

注：还可以使用":nth-child(2n+1)"和":nth-child(odd)"。

:nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义，如：

.demoli:nth-child(n+5){background:lime;}

:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：

.demoli:nth-child(-n+5){background:lime;}

:nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了，比如这个实例

.demoli:nth-child(4n+1){background:lime;}

4、:nth-last-child()：从最后一个元素开始算，来选择特定元素。

.demoli:nth-last-child(4){background:lime;}

说明：

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

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

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

.demoli:nth-last-child(2n){background:lime;}

.demoli:nth-last-child(even){background:lime;}

等于

.demoli:nth-child(2n+1){background:lime;}

.demoli:nth-child(2n-1){background:lime;}

.demoli:nth-child(odd){background:lime;}

注：“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

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

.demop:nth-of-type(even){background-color:lime;}

其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器。

6、:nth-last-of-type和前面的:nth-last-child一样使用，只是他指定了元素的类型而以。

注：同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type类似于:first-child和:last-child;不同之处就是指定了元素的类型

注：:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type表示的是一个元素是它的父元素的唯一一个子元素。

p:only-of-type{background-color:red;}

9、:empty用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

p:empty{display:none;}

注：IE6-8浏览器不支持:empty选择器

四、伪元素CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

p::first-line{font-weight:bold;}

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉，

p::first-letter{font-size:56px;float:left;margin-right:3px;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

.clearfix:before,.clearfix:after{content:".";display:block;height:0;visibility:hidden;}

.clearfix:after{clear:both;}

.clearfix{zoom:1;}

::selection用来改变浏览网页选中文的默认效果。

最实用的就是:nth-child...

转自：http://blog.sina.com.cn/s/blog_65c2ec5e0101dje3.html