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