css3新增选择器

为了便于初学者温故而知新，先回顾一下CSS1和CSS2中定义的常用的选择器：
**CSS1：**
E（类型选择器），
#myid   id选择器，
.myclass 类选择器
E F    包含选择器
E:link E:visited  链接伪类选择器
E:active E:hover E:focus   用户操作伪类选择器
**CSS2：**
E[foo] E[foo="bar"]  属性选择器
E:fisrst-child 结构伪类选择器
E::before  E::after  伪元素选择器
E>F 子包含选择器
E+F 相邻兄弟选择器

上面所讲的这些选择器能够满足web开发的一些基本需求。
一、在CSS3中新增了3个属性选择器，这3个属性选择器与CSS2中已经定义的4个属性选择器共同构成了CSS的功能强大的标签属性过滤体系。
先看CSS2中的4个属性选择器：

下面我们看一下CSS3中的三个新的属性选择器：

从上面的解释中我们可以看出，^表示匹配起始符，$表示匹配终止符，*表示匹配任意字符，使用它们也更符合编码习惯和惯用编程思维。很简单的一个例子，对于匹配链接的情况，我们可以使用a[href^=”http:”]这个样式方便的匹配到所有以http:开头的链接。
二、UI元素状态伪类选择器
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、待机等等。CSS3中定义了3种常用的的
状态伪类选择器。

对于UI元素状态伪类选择器，各个主流浏览器的支持都是相对很好的。UI设计的一个核心就是让表单更可用、
易用和好用，我们可以使用上面介绍的UI元素状态伪类选择器进行一下有必要的设计。

上面是一些简单的介绍。持续更新~欢迎大家给出意见。