(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之后
