伪类的顺序
涉及到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