a标签4个伪类的顺序排列

Posted 2021-10-20 1833lljy

与a标签有关的常用伪类包括4个，分别为:link、:visited、:hover、:active。在设置a标签的css样式时，需要设置的顺序为Love Hate(:link、:visited、:hover、:active)。

原因：浏览器的就近原则，举个例子：

我定义的顺序是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 的后面；

如果把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色 。

其实 link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）

 

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

 

另外 :link 和 a的样式有可能会冲突

1. #test{
2. color:yellow;
3. }
4. #test:link{
5. color:red!important;
6. }
10. <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