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.无论是否访问过,当鼠标点击超链接未松开的时候,也应该有相同的样式.

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

  1. 从 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 之后

终上所述
注意: :hover 必须位于 :link 和 :visited 之后, :active必须位于 :hover之后

 根据以上分析可以得出 a 标签四个伪类的顺序应该是:
          (1) :link                  
          (2) :visited 
          (3) :hover              
          (4)  :active


  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值