我们在点击超链接的时候，会发现
这四个状态，链接的文本会发生不一样的状态，这样的效果就是用CSS的伪类选择器来实现。
正确的CSS顺序应该是
Why?
因为这四个CSS的优先级是一样的，所有后者会覆盖前者。
从实现的步骤来分析，就应该是这样排列才对。
用户的操作步骤是
1. 还没有点击链接
那么只有 a:link 这一条样式生效，用户看到的是没有点击的样式。
2. 鼠标移上去悬浮在链接上
那么 a: link 和 a: hover 这两条生效，由于 a: hover 在后面，所以样式3覆盖了样式1，显示的是鼠标移上去悬浮在链接上这个样式
3. 鼠标按了下去
那么 a:link 、 a:hover 和 a:active 这三条生效， a:active 覆盖了前两者，显示出来的就是鼠标点击时候的样式。
4. 点击完发生链接之后
那么 a: visited 这一条永久生效，显示出来的就是链接后的样式。
总之，必须是，
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：a:visited {color: blueviolet}。
3、浏览器运行index.html页面，此时超链接文本单击后的样式被设置了文字紫色颜色。
1、新建一个HTML文件，文件名为test.html，title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。
2、在页面编写nav标签，在里面放三个超链接(首页、栏目一、栏目二)，代码如下：
3、运行代码，效果如下：
4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化，代码如下：
5、运行代码，效果如下：可见，经过CSS样式美化，鼠标经过的时候，显示蓝色。
6、利用CSS编写代码，实现鼠标经过时显示下划线效果，代码如下：
7、在浏览器运行代码，实现了想要的效果。
