通过CSS样式设置，链接元素<a>可以表现出不同的风格样式，比如上面的虚线按钮“上一节”和“下一节”实质上就是链接a元素。

链接元素的CSS样式

链接元素相关的CSS样式有很多，诸如文本颜色color、背景样式background、边框样式border、轮廓样式outline、划线风格text-decoration等。

a {
    color: White;
    background: Tomato;
    border: 7px solid #46acb6;
    outline: 7px solid #d4d854;
    text-decoration: overline;
}

运行一下

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

运行一下

因为后面的样式表会覆盖前面的样式表，所以同一个元素这几类伪类的引入需要注意前后顺序，否则会被覆盖而难以生效。 a:hover 必须放在 a:link 和 a:visited 后面，否则不会有效果的。a:active必须放在 a:hover 后面，否则不会有效果。