前端 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标签*/
}