上一章大家肯定还有疑问，就是链接的下划线好像是去掉了，但当我把鼠标放在链接上的时候，下划线又出来了，这就十分难受。
因为对于链接，它本身是有几个状态的。首先是我们完全没有搭理它的状态，就是最普通的默认状态；然后当我们的鼠标放上去的时候，又是一种状态；当我们的鼠标按下去，还没有抬起来的时候，就是正在点击这个链接的状态；还有就是我们访问过这个链接以后的状态。
我们用默认的方法所定义的，只是链接在第一个状态下，也就是默认状态下的样式。而是另外几个状态，有些属性是会从链接的默认状态继承的，而有些属性需要我们单独进行定义。那就定义好了，可是，我们如何表达这几种状态呢？
我们前面说到选择器，只说了使用元素的标签名，去表示这些元素。如何表示链接元素的这些状态呢？我们来认识稍微复杂一些的选择器，伪类。
在这一章，我们先不纠结它的名字为什么叫做这个？看一下怎么写，然后用用再说、
/* :link 没有被访问的链接 */a:link {color: blue;}/* :visited 已经访问过的链接， */a:visited {color: blue;}/* :hover 鼠标悬停在此链接上 */a:hover {color: blue;}/* :active 当前此链接正被按下 */a:active {color: blue;}我们在标签后面加上冒号，再用单词来描述它的状态。那么冒号及其后面的部分，就是伪类。现在我们用伪类来修饰 a 这个选择器。
但是伪类并不只是用来说明状态，它可能是许多其他东西，不过一般都是用来说明前面这个选择器所相关的一些东西。就是在前面的基础上又如何如何。
现在才刚刚接触，你对这个概念有一定的感受就可以了。上面几个伪类，我们经常用，当然主要是用来描述链接的。因为链接这个元素我们在每个页面中都会用到，现在的审美和默认的样式也有一定的出入，所以做一些自定义是在所难免的。
然后上面几个伪类，在定义的时候是有顺序的，你可以只使用其中的一个或几个，但是一定要按照上面的顺序书写，否则可能出现其他预料不到的问题。
:hover 这个就很厉害，我们几乎可以把它用在所有元素上，用来表示，当鼠标在这个元素之上的时候。借助这个功能，我们就可以实现许多有意思的动态效果了，这个在后面会做演示。
:link 这个伪类其实比较少用到，从名字也可以看出，它就是针对于链接的，而一般的我们先直接设定 a 的样式，再设定其他几种状态就好了。
因为本站已经对链接增加了额外的样式，所以就不做演示了，大家可以参照上述代码，把每个状态都设置为不同的颜色，然后来测试一下效果。
暂无评论内容