去除a标签默认样式_超链接样式的使用CSS入门基础（014）

---

今天我们分享关于超链接样式的内容。在浏览器中，超链接的样式有默认样式、点击后样式、鼠标悬停样式和激活样式四种状态。超链接默认情况下是带有下划线的，看起来很丑，用户体验不好，前面我们说到了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，否则浏览器无法正常显示样式。请大家注意此点。示例代码：

      超链接伪类          #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;}            

常用超链接伪类：初学者会有疑问，是不是每一个超链接都必须定义4中状态样式才可以？答案是否定的。一般情况下，我们只需要定义常用的两种状态，未访问状态和鼠标悬停状态。未访问状态，可以直接使用a标签代替就可以了。语法：

a {属性：属性值；}a:hover {属性：属性值；}

示例代码：

      超链接伪类          #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;}            

  按照正常人的思维来说，超链接样式的定义顺序应该是“未访问时样式，鼠标悬停时样式，点击时样式和访问后样式”，但是为什么定义超链接的样式必须按照“未访问时，访问后，鼠标悬停时，点击时”才能在浏览器中正常显示。这是原因是如此定义顺序，是W3C官方组织定义的顺序，要求按照标准执行就可以了。就像交通信号灯规定，红灯停绿灯行是一个道理，有标准就按照标准执行就可以了，不用纠结太多。

---