加载中...

a元素的伪类顺序

一个链接可能同时处于多种状态,即同时属于多个伪类,link和visited是常态效果,hover和active是瞬时效果。

  1. 未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,<a>同时处于link和hover(或active)状态,由于它们特指度相同,在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。
  2. 再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前
  3. 其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。
  4. 最后,其实link、visited两个伪类之间顺序无所谓。(因为它俩不可能同时触发,即又未访问同时又已访问)

    因此我们由此得出它们之间的顺序为:link>visited>hover>active
posted @ 2021-08-12 11:34  莫等闲O(∩_∩)O~~  阅读(105)  评论(0)    收藏  举报