CSS3学习笔记 之 动态伪类选择器

  动态伪类选择器为伪类选择器的一种，其语法如下：

E: pseudo-class {property:value} 

其中E为HTML中的元素，pseudo-class是CSS的伪类选择器名称，property是CSS的属性， value为CSS属性值。

动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪类。

其支持的详细语法如下：

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E:hover	用户行为伪类选择器	选择匹配的E元素，而且匹配元素被激活。常用于锚点与按钮上。
E:avtive	用户行为伪类选择器	选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	用户行为为类选择器	选择匹配的E元素，而且匹配的元素获得焦点

除了E:active和E:focus需要IE8和以上版本支持外，其他的动态伪类选择器所有浏览器都支持。

用如下代码测试动态伪类选择器，实现按钮在被选中和点击时候的效果：

	
		
		
		
	
	
		

			View project on GitHub
		
	

显示效果如下（使用的是.btn默认样式）：

当光标放在按钮上的时候的效果（使用的是.btn:hover时候的样式）：

当按钮被点击时候的效果（使用的是.btn:active对应的样式）：

爱恨原则（LoVe/HAte）:

锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte, 也就是link-visited-hover-active.（L-V-H-A），另外在IE6， IE7， IE8中a:hover, a:active, a:visited并没有按照规范描述的算法来计算它们的针对性（specificity），

而是根据链接的实际状态来决定使用哪个规则集里面的声明。详情可参考这篇文章: 

RS3005: IE6 IE7(Q) IE8(Q) 中 A 元素的 :visited :hover :active 伪类未按规范要求的算法来计算针对性

参考资料：

《图解CSS3：核心技术与案例实战》