博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
a 标签的伪类的正确顺序,以及原因
阅读量:6619 次
发布时间:2019-06-25

本文共 737 字,大约阅读时间需要 2 分钟。

注意,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

你可能感兴趣的文章
8月第一周B2B类网站排名:阿里巴巴持续领先
查看>>
IDC评述网:12月下旬国内域名注册商净增量Top10
查看>>
5月第一周全球域名解析商Top15:万网升至第7名
查看>>
3月第3周网络安全报告:被篡改.COM网站占74.3%
查看>>
java JSplitPane设置比例
查看>>
CXF WebService Hello World
查看>>
济南企业短信平台的价格如何?
查看>>
requirejs
查看>>
php printf() 输出格式化的字符串
查看>>
浅谈C中的指针和数组(二)
查看>>
微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:
查看>>
2001年日语能力考试二级真题及答案
查看>>
FUNCS.H中的函数声明
查看>>
让织梦CMS的后台编辑器支持优酷视频
查看>>
Python语言中round函数的一个疑惑
查看>>
Spring事务隔离级别,事务传播行为
查看>>
CRC是什么?
查看>>
每次看完羽毛球赛
查看>>
第一章练习题
查看>>
三、JVM垃圾回收1(如何寻找垃圾?)
查看>>