a 标签的四种伪类 (:link, :visited, :hover, :active) 同时出现时的顺序问题

a 标签的四种伪类 (:link , :visited, :hover, :active) 的顺序如下

  (1)  :link                   选择所有未访问链接   
  (2)  :visited                选择所有访问过的链接
  (3)  :hover                  选择鼠标在链接上面的链接  ( :hover 选择器器可用于所有元素，不仅是链接。)
  (4)  :active                 选择活动链接 (鼠标点击与释放之间)
   (注意: link 和 visited 的位置可颠倒,建议不这样做)

1. 从用户体验分析

1.访问过得链接要和未访问的链接有区别
2.无论是否访问过,当鼠标移动( :hover)到 a 标签上的时候需要有相同的样式变化,如加下划线,改变文字颜色,背景色等,从而让用户知道这是可以访问的超链接
3.无论是否访问过,当鼠标点击超链接未松开的时候,也应该有相同的样式.

2. 从 css 优先级分析

1.同样的选择器,定义同一个规则,则后面的规则会覆盖前面的规则,这就是css之所以叫做层叠样式表的原因咯.
      如: p { color:red }    p { color: yellow } 
 上面 css 两次定义了 p 标签的颜色值,后面一个会覆盖前面一个的值,最终 p 标签的颜色为 yellow

3. 从 a 标签状态分析

1. a 标签 href 属性有值，在没有任何操作时具备了 :link 的状态
2. a 标签访问过，同时会具备 :link :visited 两种状态;然而访问过的 a 标签用 :visited表示,所以 :visited 应该在 :link 之后
3. a 标签访问过且鼠标移动到上面的时候, 就具备了 :link :visited :hover 三种状态;然而鼠标移动到上面的 a 标签用 :hover表示,, 所以 :hover 应该在 :link,:visited之后
4. a 标签访问过且鼠标点击为松开的时候,就具备了  :link :visited :hover :active 四种状态, 所以 :active 应该在 :hover 之后

终上所述

 根据以上分析可以得出 a 标签四个伪类的顺序应该是:
          (1) :link                  
          (2) :visited 
          (3) :hover              
          (4)  :active
注意:   :hover 必须位于 :link 和 :visited 之后, :active必须位于 :hover之后

参考链接