为了便于初学者温故而知新,先回顾一下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元素状态伪类选择器进行一下有必要的设计。
上面是一些简单的介绍。持续更新~欢迎大家给出意见。