今天我们分享关于超链接样式的内容。
在浏览器中，超链接的样式有默认样式、点击后样式、鼠标悬停样式和激活样式四种状态。
超链接默认情况下是带有下划线的，看起来很丑，用户体验不好，前面我们说到了text-decoration:none可以去除下划线。
表示四种访问状态，可以使用超链接的伪类来定义。
语法：
a:link {属性：属性值}a:visited {属性：属性值}a:hover {属性：属性值}a:actived {属性：属性值}
| 超链接伪类 | |
| 属性 | 说明 |
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标悬停其上时的样式 |
| a:actived | 定义鼠标单击激活时的样式 |
定义这四个伪类，必须按照顺序进行，依次为link、visited、hover和active，否则浏览器无法正常显示样式。请大家注意此点。
示例代码：
<html><head><title>超链接伪类</title><style>#div1{width:200px;height:30px;line-height:30px;border: 1px solid #cccccc;text-align:center;background-color:#40b20f;}a { text-decoration:none; font-size:18px;}a:link { color:white;}a:visited { color:purple;}a:hover { color:yellow; text-decoration:underline;}a:active { color:red;}</style></head><body><div id="div1"><a href="http://www.baidu.com">baidu</a></div></body></html>
常用超链接伪类：
初学者会有疑问，是不是每一个超链接都必须定义4中状态样式才可以？答案是否定的。一般情况下，我们只需要定义常用的两种状态，未访问状态和鼠标悬停状态。
未访问状态，可以直接使用a标签代替就可以了。
语法：
a {属性：属性值；}a:hover {属性：属性值；}
示例代码：
<html><head><title>超链接伪类</title><style type="text/css">#d1{width:200px;height:40px;line-height:40px;border: 1px solid #cccccc;text-align:center;background-color: #40b20f;}a { text-decoration:none; color:purple;}a:hover { color:white;}</style></head><body><div id="d1"><a href="http://www.baidu.com">baidu</a></div></body></html>
按照正常人的思维来说，超链接样式的定义顺序应该是“未访问时样式，鼠标悬停时样式，点击时样式和访问后样式”，但是为什么定义超链接的样式必须按照“未访问时，访问后，鼠标悬停时，点击时”才能在浏览器中正常显示。
这是原因是如此定义顺序，是W3C官方组织定义的顺序，要求按照标准执行就可以了。就像交通信号灯规定，红灯停绿灯行是一个道理，有标准就按照标准执行就可以了，不用纠结太多。
6598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
