首页 > 代码库 > <a>链接的四个伪类顺序

<a>链接的四个伪类顺序

摘自: http://www.cnblogs.com/xiayi/p/5350423.html

 

 <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间。

  为了给链接的4个状态应用样式,引入伪类的概念。

  什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用。(这些类确实存在,浏览器在后台会向这些类增加和删除元素)

  我在看《CSS设计指南》时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果。

  也即这样写:

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

 

   为什么必须得按顺序呢?

  这个问题可以这样来解答。

  首先注意关键的两点:1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态,即同时属于多个伪类。

  好,现在来详细剖析。

  未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,<a>链接同时处于link和hover(或active)状态,由于它们特指度相同,在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。

  再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前

  其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。

  最后,其实link、visited两个伪类之间顺序无所谓。(因为它俩不可能同时触发,即又未访问同时又已访问。)

  记这顺序有个小招数,“LoVe? HA!”。

<a>链接的四个伪类顺序