跳到主要内容

CSS 伪类与伪元素

超链接注册伪类

:link:visited:active:hover 的声明顺序是怎样的?

:link 表示未访问的链接状态;
:visited 表示已访问状态; :active 表示激活状态(鼠标按下); :hover 表示悬停状态。

推荐顺序是 LVHA,即 :link :visited :hover :active。理由如下:

  • 当鼠标悬停在未访问的链接上时,:link:hover 都会命中,如果 :hover:link 之前声明,那么(:hover)就会被覆盖;
  • 当鼠标悬停在已访问的连接上时,:visited:hover 都会命中,如果 :hover:visited 之前声明,那么(:hover)就会被覆盖;
  • 当鼠标单击链接时,:active:hover 都会命中,我们大多是想让 :hover 只在悬停时展示样式,按下鼠标时使用 :active 样式,因此 :active:hover 之后声明;
  • 综上,:hover 应在 :link:visited 之后,在 :active 之前,因此 active 在最后。而 :link:visited 两者的顺序无所谓,互不影响。