基础篇 - a标签的四伪类顺序

开篇

很早之前顺着W3C学，那会儿还不懂知识积累，只是喜欢啥学啥，现在有了博客，却发现很多积累的知识都忘掉了，所以再做一遍积累。

这篇是a标签的四种伪类的顺序，很常用。

代码实例

a标签伪类的作用：

“:link“: a标签还未被访问的状态；

“:visited“: a标签已被访问过的状态；

“:hover“: 鼠标悬停在a标签上的状态；

“:active“: a标签被鼠标按着时的状态；

<style type="text/css">
a:link {color: #000;} /* 未访问的链接 */
a:visited {color: #F00;} /* 已访问的链接 */
a:hover{color: #0F0;} /* 鼠标在链接上 */
a:active {color: #00F;} /* 正在跳转时。Tip：当你已经到了要链接的页面，然后再返回，原页面上的此链接仍是此颜色 */
</style>

取消下划线：

a{text-decoration: none}

顺序的形成原因

本质是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了——伪类的顺序必须按

lvha

来写。

下面结合这4个伪类简单说下：

因为前2者两种状态是 常态，而后2者是 即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边；

在常态下：如果a标签被访问过后，就要呈现被访问过的状态，所以visited 要放在link后边；

因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放后边。

参考资料：

a标签伪类的作用及书写顺序是什么 - 站长之家

a标签的link、visited、hover、active的顺序 - Ron Ngai