CSS3 选择器—伪类选择器

伪类选择器语法

1. E:pseudo-class {property:value}

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

   • E为元素
   • class为类名
   • pseudo-class为伪类名称
   • property是css的属性
   • value为css的属性值

语法1示例：

a:link {color:red;}

语法2示例：

a.selected:hover {color: blue;}

动态伪类

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

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

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

.demo a:link {color:gray;} /*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/.demo a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/

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

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

UI元素状态伪类

把”:enabled”,”:disabled”,”:checked”伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作。

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

CSS3的:nth选择器

这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类。

:nth选择器 说明 :first-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 选择的元素里面没有任何内容。

:first-child

选择某个元素的第一个子元素。

:last-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); 表示隔几选一

:nth-last-child()

和前面的”:nth-child”不一样了，他只要是从最后一个元素开始算，来选择特定元素。

选择倒数第几个元素。

:nth-of-type()

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素。

:nth-last-of-type()

倒数。

:first-of-type

第一个。

:last-of-type

最后一个。

:only-child

一个元素是它的父元素的唯一一个子元素。

:only-of-type

:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素。

:empty

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

p:empty {display: none;}

否定选择器（:not）

否定选择器 :not()，可以让你定位不匹配该选择器的元素。

伪元素

::first-line

选择元素的第一行

::first-letter

选择文本块的第一个字母

::before和::after

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