伪类的顺序

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

涉及到a元素的伪类共有四个:

:link   /*普通的链接*/
:visited    /*被访问过的链接*/
:hover  /*有鼠标移入时的链接*/
:active     /*正在点击时的链接*/

四个选择器的优先级是相同的。


如有以下样式:

a:link { color: black; }
a:visited { color: red; }
a:active { color: blue; }
a:hover { color: orange; }

试分析:
当鼠标点击该链接时,鼠标应先移入该链接,所以:active:hover同时选中a元素,而:active:hover的优先级相同,优先级相同时应用靠后的样式,因此此时:active的样式失效。


另有以下样式:

a:hover { color: orange; }
a:active { color: blue; }
a:link { color: black; }
a:visited { color: red; }

不难发现,此时:hover和:active设置的样式均失效。


所以正确编写顺序应为:

:link
:visited
:hover
:active

可以简记为LVHA(LOVE HATE)爱与恨。

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/21.html