【CSS】为什么a标签的伪类选择器要注意书写顺序？

微信订阅号：Rabbit_svip

和<a>标签相关的伪类有很多，但最常见（也是初学者最先接触到）的有以下4个。

1. :link
2. :visited
3. :hover
4. :active

它们的大概作用分别如下（详细作用以后逐一探讨，这次的主题主要和css的优先级有关）

a:link

选取用户未访问的<a>标签，而且鼠标没有悬停在其上。

a:visited

选取已被访问过的<a>标签。

a:hover

选取鼠标悬停在其上的<a>标签。

a:active

选取用户正在点击的<a>标签。

大多数前端开发者在刚接触css时，和<a>标签有关的伪类选择器（也有的教材称之为“动态伪类选择器”）是以上4个。除了学习到以上4个伪类选择器的作用外，通常还会学到一个口诀（“LoVe/HAte”，也就是“爱/恨”。也可能是别的记忆口诀），以此来帮助记忆使用顺序。

那么到底为什么一定要按照这个顺序来写呢（如果都需要在这些场景下使用不同样式的话）？

要弄清楚这个顺序，首先要熟悉css优先级的规则。从上面的写法来看，都是由一个元素选择器和一个伪类选择器组成，所以优先级都是相同的。

因此也延伸出另一个知识点：浏览器如何处理冲突的样式？

浏览器遵循三个步骤：来源、优先级、源码顺序。

这里假设来源相同，又因为优先级相同（上面已经说了），所以最后浏览器考虑的是源码顺序。

所以在开发的时候也要从使用的角度来思考。

其实 a:link 和 a:visited 这两个谁写在前面都没关系。

因为 a:hover 的作用是鼠标经过才生效，所以 a:link 和 a:visited 必须写在 a:hover 前面。

a:active 的作用是点击时才生效，而点击之前鼠标是必须放到<a>标签上的，所以在触发 a:active 之前，肯定先触发 a:hover 。如果 a:active 写在 a:hover 前面，那么无论怎么点击，都只会触发 a:hover 的效果。因为它们优先级相同，所以浏览器采用源码顺序的规则。

由于“LoVe/HAte”比较有记忆点，所以现在默认都是用 a:link -> a:visited -> a:hover -> a:active 这个顺序。