CSS考点之一，<a>标签，伪类

---

博主的博客地址：Stillwater的个人博客
转载请注明原文链接

一、<a>标签常用的伪类概述

    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

• link 当有链接，且该链接未被访问过时，此伪类处于激活状态。

• vistied 某个链接已经被访问过时，此伪类处于激活状态。

• hover 鼠标悬停在某个链接上时，此伪类处于激活状态，直到鼠标移开链接。

• active 用鼠标点击链接时，此伪类激活。注意，鼠标点击后不松开，此伪类一直激活，直到松开鼠标。

二、<a>标签伪类书写顺序详解

为什么要考虑伪类的书写顺序？

  第一，CSS（Cascading Style Sheets）全称翻译为层叠样式表。有时候多条规则会定义元素的同一个属性，这时该怎么办呢？CSS用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。不要受这些术语的影响，你只要去试，就能明白CSS决定该应用哪些样式以及何时应用这些样式的方式。¹
  第二，由于<a>标签的这四个伪类的特殊性是一样的，所以当某个链接处于的状态同时激活多个伪类时，那么伪类的书写顺序就起到了关键作用，从而影响最终的显示效果。这就是为什么我们要考虑伪类的书写顺序。

哪些伪类会同时激活并影响显示效果？

  第一，其实:link和:visited两个伪类之间顺序无所谓。因为它俩不可能同时触发，即在未访问的同时访问过。此处注意，有人将:link理解成只要某元素有链接存在，就会激活，这是错误的。当链接被访问过以后，:link就不再激活。我们做个试验。

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}                                                      

  我们把:link放在最后，开始时链接未访问，无论是我鼠标悬浮还是点击，颜色都不会改变，都是蓝色。当我第一次点击鼠标并松开后，颜色变成红色。然后再悬浮就会变成绿色，再点击，就会变成紫色，再松开就恢复成红色。蓝色不会再出现。此时链接依然存在，只是已经被访问过，所以:link伪类不再激活。
  第二，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标悬浮在链接上时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:hover放在:link和:visited后面

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

  第三，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标点击链接时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:active放在:link和:visited后面

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

  第四，顺序上，总是先将鼠标悬浮在链接上，然后才能够进行点击操作，预期效果是悬浮时产生颜色变化，点击鼠标时产生另一种颜色变化。若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前。²

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

  记住顺序的口诀：“LoVe，HA”

---

1. HTML5与CSS3基础教程（第8版）第七章第四节，[美] Elizabeth Castro　Bruce Hyslop　著，望以文　译。 ↩
2. 引用自 <a>链接的四个伪类顺序。 ↩