CSS链接伪类的顺序研究

CSS链接伪类有5个：

1. link：指的是拥有href属性，并且未被访问的状态
2. visited：已经被访问过的链接
3. focus：获得焦点的状态，例如被用Tab键选中、鼠标点击后未选择页面其他元素时
4. hover：鼠标悬停的状态
5. active：鼠标按下时候的状态，

很多文章上面都推荐这5个伪类在使用的时候，按照“link-visited-focus-hover-active”的顺序，虽然这可以满足绝大多数场景的使用需求，但这个顺序也是可以修改的。

我们知道在CSS当中，当某个元素可以匹配两个选择器，并且这两个选择器的优先级相同的时候，那么CSS文件中靠后那个选择器将生效，这个在伪类选择器当中也适用。

在这5中选择器当中，link和visited两个是互斥的并且可以覆盖所有的场景（这里只考虑有href属性的情况），因此是不能把这两个都放在最后的，如果这两个放在最后，那么其他的伪类将都不生效。但是，当link和visited这两个放在前两位的时候，他们之间的位置是可以互换的。hover和active两个必须hover在前active在后，因为hover时鼠标悬停包含了鼠标点击，如果hover在后则active不生效。按照“link-visited-focus-hover-active”的顺序来书写链接伪类的顺序正是出于这种考虑。

我们也可以根据自己的需求，适当调整顺序。例如，如果我们希望实现只对未访问过的链接有悬停样式，访问过的链接没有，那么可以按照“link-hover-visited-focus-active”的顺序，这样在悬停于visited的链接之上时，hover的样式会被visited的样式覆盖而不生效，实现只对未访问过的链接有悬停样式的效果。

参考文献：Eric A. Meyer, Estelle Weyl《CSS权威指南》