CSS3 学习+实践（二）

三：伪类选择器

CSS的伪类语法主要有两种语法表达方式：

1：　　E:pseudo-class {property:value}             /*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/

2：　　E.class:pseudo-class{property:value}

A : 最常见的锚点伪类

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/

.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active

1. :hover用于当用户把鼠标移动到元素上面时的效果；
2. :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
3. :focus用于元素成为焦点，这个经常用在表单元素上。

B : UI元素状态伪类：

　　":enabled",":disabled",":checked"   IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

C : CSS3的:nth选择器

1. :fist-child选择某个元素的第一个子元素；
2. :last-child选择某个元素的最后一个子元素；
3. :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);/*表示隔几选一*/

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

                     

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

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

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

           

:nth-last-of-type   和:nth-of-type一样，找到指定元素只是是倒着数过来的。

: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之类选择器就能达到这此功能。

IE6-8浏览器不支持:only-child选择器；IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

D : :empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格也没有

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

E : 否定选择器（:not）

否定选择器和jq中的:not选择器一模一样,

否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器

F : 伪元素

“::first-letter,::first-line,::before,::after,::selection”：

::first-line选择元素的第一行.

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

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

::selection用来改变浏览网页选中文本的默认效果，“::selection”来改变在浏览器中选中文本后的背景色与前景色。::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”，:“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

                                                 

参考文章：点击