a 标签的伪类的正确顺序,以及原因


注意,a 标签的伪类是有顺序的,否则有可能样式不对;lvha, 
原因:浏览器的就近原则,举个例子:
我定义的顺序是a:visited、a:hover、a:link,这时候就会发现,不管我有没有hover上去,样式都是link的样式的,这是因为鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。 

所以,如果一个链接没有被访问过,那么它有可能同时拥有 link , hover 两个属性,不能让 link 写在后面,否则不管 hover 是否,都会显示link的样式;同样的道理,如果一个链接已经被访问过了,那么它有可能同时拥有visited , hover 两个属性,hover 要在 visited 的后面;

所以,我们总结出,要想让一个链接各个阶段都正常呈现样式,正确的顺序是 lvha ;

另外 :link 和 a的样式有可能会冲突
 
    
  1. #test{
  2. color:yellow;
  3. }
  4. #test:link{
  5. color:red!important;
  6. }
  7. <a href="#" id="test">sss</a>
总结:当 <a> 标签的  href 属性为空的时候,:link样式不会生效,所以正常的  color : yellow 会生效;当 <a> 标签的 href 属性不为空的时候,:link 样式才会生效,这时候,如果 <a> 标签正常样式 和 a:link 冲突了的话,以写在后面的那个为准;




转载于:https://www.cnblogs.com/dujuncheng/p/8a44d12f5dec0def9518321af4e71c22.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值