A标签的四个伪类（L V H A）排序上的讲究

A标签的四个伪类：

 

LINK:具有链接属性

VISITED:链接地址已被访问过

HOVER:鼠标悬停时的状态

ACTIVE:被用户激活（鼠标点击，但未释放）

 

为什么这么排列（L V H A）？

 

1.从用户体验的角度

 

在用户使用超链接的时候，为了最佳的用户体验，要做到下面几点：第一：不管是否是被访问过的超链接，只要我鼠标移上的时候(:hover)都要有写变化，比如变色、加下划线等等，告诉用户选中的是可以点击的超链接。第二:不管是否访问过，在a标签被激活时（:active），都应该有相同的样式变化。也就是说，同一个a标签，未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解，用户点下同一个超链接时的效果不应该有差别。第三:访问过的a标签可能要跟没有访问过的a相区分。

 

2.从CSS优先级角度

 

**不管什么情况下鼠标悬停都应该有一个样式变化（:hover）,我们就把hover放在最后，防止具备其他状态时，被其他状态的设置覆盖掉。

**当a被激活时(:active)，我们要求不管是否访问过，都应该有相同的样式，也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。

**被访问过的a（:visited）可能会有不一样的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性， 即 :visited 要放在 :link 的后面。

 

转载于:https://www.cnblogs.com/cangmang/p/canglang.html