前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结

前端 CSS：锚伪类选择器:hover,:active，:visited;等用法总结
锚伪类选择器:hover,:active，:visited;等用法总结

一、什么是锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */

a:visited {color: #00FF00}	/* 已访问的链接 */

a:hover {color: #FF00FF}	   /* 鼠标移动到链接上 */

a:active {color: #0000FF}	/* 选定的链接 */

 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
 
 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

所以它的顺序是

                          a:link ； a:visited 

                               a:hover

                               a:active 

提示：伪类名称对大小写不敏感。

二、锚伪类选择器是否只能用于a标签？

不是的，关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

现在主流浏览器：

                 1、伪类选择器:hover 和:active; 可以用于所有元素

                 2、a标签专用 :vistied；:link; 

三、伪类选择器hover的巧妙用法

a标签里一张图片：

<div>
<a href="#">
<img alt="i am an img" src="img.jpg"/>
a>
div>

一般hover这个css伪类对于除a标签外的标签是不起作用的（IE6下不可以）：如下

img:hover{
border:1px solid #000;/*FF下有效果,IE6下没有效果*/
}

采用声东击西方法,如下写:

a:hover img{
border:1px solid #000;/*可以理解为鼠标在其上的a里面的img标签*/
}