花开陌上

CSS 链接

在写这篇文章之前，只是知道有链接的不同状态下的样式这东西的存在，并未去认真了解过的链接的不同状态可以有不同的样式。

能够设置链接样式的 CSS 属性有很多种（例如 color, font-size, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：
- :link - :visited - :hover - :active

语法与说明：

:link 伪类向未访问的链接添加特殊的样式。

Selector : link { sRules }

设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性（特性）的a对象，此伪类不发生作用。


:visited 伪类向已访问的链接添加特殊的样式。

Selector : visited { sRules }

设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性（特性）的a对象，此伪类不发生作用。


:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

Selector : hover { sRules }

设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。


:active 伪类向激活的元素添加特殊的样式。(:active 在鼠标点击与释放之间发生的事件)

Selector : active { sRules }

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。

定义和用法：

:link 伪类向未访问的链接添加特殊的样式。
这个伪类应用于尚未访问过的链接；也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。

a:link { font-size:14px; text-decoration:underline; color:#000000; } 

:visited 伪类向已访问的链接添加特殊的样式。

a:visited { font-size: 14px;text-decoration:underline; color:#ff0000; } 

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

a:hover { font-size:14pt; text-decoration:underline; color:#00bfff; } 
a:hover span{ color:red; } 

:active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。
这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。

a:active { font-size:14px; text-decoration:underline; color:#ee82ee; }

注：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后！