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

和 <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 这个顺序。