你知道hover、active这四个伪类为什么要按顺序写吗

时间:2022-02-07 22:36:38

刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗


引言

:link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的记忆方法),不然有些效果会出问题。

但是你们都想过这几个属性为什么要按顺序排吗?


:link:hover

当鼠标移动到a标签上时,会触发a标签上的:hover效果,但同时,此时的:link效果仍然存在于a标签上,既然两个效果都在a标签上起作用,那么根据css的就近原则,写在后面的css样式就覆盖了前面的效果,所以

<style>
#b1:hover{
color: red;
} #b1:link{
color: green;
} </style> <a href="#" id="b1">点击我</a>

效果:

#b1:hover{
color: red;
}

#b1:link{
color: green;
}

点击我


可以看到,由于此时link位于hover之后,所以当我们鼠标移上a标签时,发现hover效果被覆盖了,并没有变成红色,如果我们把顺序换过来,那么就会看到我们预想中的效果了

<style>

    #b2:link{
color: green;
}
#b2:hover{
color: red;
}
</style> <a href="#" id="b2">点击我</a>

效果:

#b2:link{
color: green;
}
#b2:hover{
color: red;
}

点击我

此时,hover效果起作用了,所以我们可以得出结论一:hover要位于link之后


:link:hover:active

还是原本的思路分析,当鼠标点击时,此时:link:hover:active都在a标签上产生效果,所以还是根据就近原则,上代码

<style>

    #b3:hover{
color: red;
}
#b3:active{
color: blue;
}
#b3:link{
color: green;
}
</style> <a href="#" id="b3">点击我</a>

#b3:hover{
color: red;
}
#b3:active{
color: blue;
}
#b3:link{
color: green;
}

点击我

由于:link放在最后面,所以不管是:hover还是:active的效果都被:link覆盖了,所以此时无论鼠标以上还是点击我们都无法看到效果


<style>
#b4:active{
color: blue;
}
#b4:link{
color: green;
} #b4:hover{
color: red;
}
</style> <a href="#" id="b4">点击我</a>

#b4:active{
color: blue;
}
#b4:link{
color: green;
}

#b4:hover{
color: red;
}

点击我

:hover放到了最后,此时我们可以看到,鼠标移上:hover产生了效果,同时点击时仍然无法看到:active的效果,因为此时的:active仍被:hover覆盖了


正确的代码

<style>

    #b5:link{
color: green;
}
#b5:hover{
color: red;
}
#b5:active{
color: blue;
}
</style> <a href="#" id="b5">点击我</a>

#b5:link{
color: green;
}
#b5:hover{
color: red;
}
#b5:active{
color: blue;
}

点击我

至此,我们终于看到了想要的效果,同时也得出第二个结论

hover必须位于link之后,同时active必须位于hover和link之后

所以目前我们的顺序就是link/hover/active


visited

那么visited应该放哪里呢?我们先试着把它放到最后

<style>

    #b6:link{
color: green;
} #b6:hover{
color: red;
}
#b6:active{
color: blue;
}
#b6:visited{
color: yellow;
}
</style> <a href="#1" id="b6">点击我</a>

#b6:link{
color: green;
}

#b6:hover{
color: red;
}
#b6:active{
color: blue;
}
#b6:visited{
color: yellow;
}

点击我

鼠标移上,点击,乍一看好像没问题呀,所有的效果都正确的产生了。但是,当我们点击完了第一次a标签,再次进行点击的时候,发现:hover:active都不起效果了,原来是因为此时:visited起了作用,同时也由于:visited写在最后,所以第二次点击的时候覆盖了之前的效果


最终的代码

<style>

    #b7:link{
color: green;
} #b7:visited{
color: yellow;
} #b7:hover{
color: red;
}
#b7:active{
color: blue;
} </style> <a href="#2" id="b7">点击我</a>

#b7:link{
color: green;
}

#b7:visited{
color: yellow;
}

#b7:hover{
color: red;
}
#b7:active{
color: blue;
}

点击我

我们改了一下位置,把:visited放到了:link之后,这时,无论是第一次点击,还是第二次点击,:visited的效果都正确的产生了,同时又没有覆盖:hover:active的效果,而最终的这个顺序,也正是我们说的LvHa原则

看完此文,希望大家能够对这4个伪类有更深刻的认识,同时也能理解它们排列的顺序,其实如果理解了这几个伪类为什么这样排之后,就不再需要借助LoHa这样的窍门来记忆了,理解才是最好的记忆方法。