9.6　按状态选择链接元素

9.6　按状态选择链接元素

CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性（如图9.6.1和图9.6.2所示）。

...
     <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
     <p>Barcelona <http://www.gaudi2002. bcn.es/ english/">celebrated</a> the 150th anniversary of Gaudí's birth in 2002.</p>
...

图9.6.1　无法在代码中指定链接的状态。链接的状态是由访问者控制的。伪类让你可以获取链接的状态，以改变链接在该状态下显示的效果

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

图9.6.2　链接的样式应该始终按照这种顺序进行定义，以避免链接处于多种状态（如已访问和鼠标停留）时覆盖属性

按状态选择要格式化的链接元素的步骤

输入a（a是链接元素的名称）。
输入:（冒号）。
输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观（如图9.6.3所示）。

或者输入visited以设置访问者已激活过的链接的外观（如图9.6.4所示）。

或者输入focus，如果链接是通过键盘选择并已准备好激活的（如图9.6.5所示）。

或者输入hover以设置正被指向的链接的外观（如图9.6.6所示）。

或者输入active以设置激活过的链接的外观（如图9.6.7所示）。

9.6　按状态选择链接元素 - 图1

图9.6.3　新的、未访问的链接显示为红色

9.6　按状态选择链接元素 - 图2

图9.6.4　访问过的链接变为橙色

9.6　按状态选择链接元素 - 图3

图9.6.5　链接获得焦点（如通过Tab键）时显示为紫色

9.6　按状态选择链接元素 - 图4

图9.6.6　当访问者将鼠标指针停留在链接上时，它显示为绿色

9.6　按状态选择链接元素 - 图5

图9.6.7　当访问者激活链接时，它变为蓝色

提示　也可以对其他类型的元素使用:active和:hover伪类。例如，设置p:hover { color: red; }以后，当鼠标停留在任何段落上时，段落都会显示为红色。（注意，这一特性仅对Internet Explorer 7及以上版本有效，对IE6无效。同时，IE6和IE7均不支持对a使用:active。其他浏览器对这两个特性都支持。）

提示　由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）。一种助记口诀为“Lord Vader's Former Handle Anakin”（达斯·维达的原名叫安纳金）。有人提议使用LVHFA的顺序。这也是可行的。

9.6 按状态选择链接元素