上一章大家肯定还有疑问,就是链接的下划线好像是去掉了,但当我把鼠标放在链接上的时候,下划线又出来了,这就十分难受。

因为对于链接,它本身是有几个状态的。首先是我们完全没有搭理它的状态,就是最普通的默认状态;然后当我们的鼠标放上去的时候,又是一种状态;当我们的鼠标按下去,还没有抬起来的时候,就是正在点击这个链接的状态;还有就是我们访问过这个链接以后的状态。

我们用默认的方法所定义的,只是链接在第一个状态下,也就是默认状态下的样式。而是另外几个状态,有些属性是会从链接的默认状态继承的,而有些属性需要我们单独进行定义。那就定义好了,可是,我们如何表达这几种状态呢?

我们前面说到选择器,只说了使用元素的标签名,去表示这些元素。如何表示链接元素的这些状态呢?我们来认识稍微复杂一些的选择器,伪类。

在这一章,我们先不纠结它的名字为什么叫做这个?看一下怎么写,然后用用再说、

/* :link 没有被访问的链接 */
a:link {
  color: blue;
}
/* :visited 已经访问过的链接, */
a:visited {
  color: blue;
}
/* :hover 鼠标悬停在此链接上 */
a:hover {
  color: blue;
}
/* :active 当前此链接正被按下 */
a:active {
  color: blue;
}

我们在标签后面加上冒号,再用单词来描述它的状态。那么冒号及其后面的部分,就是伪类。现在我们用伪类来修饰 a 这个选择器。

但是伪类并不只是用来说明状态,它可能是许多其他东西,不过一般都是用来说明前面这个选择器所相关的一些东西。就是在前面的基础上又如何如何。

现在才刚刚接触,你对这个概念有一定的感受就可以了。上面几个伪类,我们经常用,当然主要是用来描述链接的。因为链接这个元素我们在每个页面中都会用到,现在的审美和默认的样式也有一定的出入,所以做一些自定义是在所难免的。

然后上面几个伪类,在定义的时候是有顺序的,你可以只使用其中的一个或几个,但是一定要按照上面的顺序书写,否则可能出现其他预料不到的问题。

:hover 这个就很厉害,我们几乎可以把它用在所有元素上,用来表示,当鼠标在这个元素之上的时候。借助这个功能,我们就可以实现许多有意思的动态效果了,这个在后面会做演示。

:link 这个伪类其实比较少用到,从名字也可以看出,它就是针对于链接的,而一般的我们先直接设定 a 的样式,再设定其他几种状态就好了。

因为本站已经对链接增加了额外的样式,所以就不做演示了,大家可以参照上述代码,把每个状态都设置为不同的颜色,然后来测试一下效果。

【本章助记卡片:卡片 for 第四十二章