CSS考点之一，标签，伪类

---

博主的博客地址：Stillwater的我的博客
转载请注明原文连接

1、<a>标签经常使用的伪类概述

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

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

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

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

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

2、<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>连接的四个伪类顺序。 ↩