我的位置: 首页  >   揭秘CSS  >   2.6.1 链接伪类选择器

2.6.1 链接伪类选择器

编辑:比特教程网    时间:2018-10-11 15:18    


在CSS中,最常用的伪类选择器,就是使用在链接的锚元素上的选择器,用于定义不同状态下的链接样式。链接伪类并不存在于HTML中,只有当用户和网站交互时,才能体现出来。

表 2-5 链接伪类选择器
选择器功能描述版本
E:link选择未被访问过的链接1
E:visited选择已被访问过的链接1
E:active选择被激活(即鼠标已经按下、还没有释放)的E元素1
E:hover选择鼠标悬停其上的E元素1
E:focus选择获得焦点的E元素1

在HTML中,超链接是指所有带有 href 属性的a元素。可以使用链接伪类来区分未访问的链接和已访问的链接:

a:link { color: blue; }
a:visted { color: purple; }

当然,对于链接伪类,不仅可以应用颜色,还可以应用更多样式。如,对于已访问的链接,除了紫色外,还可以有一条删除线。

尽管 :link 和 :visted 非常有用,但它们是静态的,第一次显示之后,它们不会再改变元素的样式。并且,它们只用于锚元素,因此被称作链接伪类或锚伪类。

而 :hover、 :focus、:active 则不同它们可以根据用户行为动态改变文档的外观,故被称为动态伪类,或用户行为伪类。

最初,动态伪类总是用来设置超链接的样式,不过,现在它们可以应用到任何元素。如在表格的行上使用 :hover 伪类,表单的文本输入框是使用 :focus 伪类,表单的提交按钮上使用 :active 伪类等。如:

tr:hover {
 background: #c1d5eb;
}
input:focus {
 outline: 1px solid #c1d5eb;
}

另外,还可以把链接伪类结合在一起使用,来创造更丰富的样式。如,定义已被访问链接的悬停效果:

a:visited:hover {
 color: #888;
}

用哪种书写顺序并不重要,a:visited:hover 和a:hover:visited 将会得到相同的效果。但是,不要把互斥的伪类结合在一起,如,一个链接不能同时是未访问和已访问状态,因此a:link:visited 没有任何意义。