css-link

<h2><span style=“color:#69d2f9;”>CSS 链接</span></h2>

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

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

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

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

<h2>语法与说明：</h2>
<strong>:link 伪类向未访问的链接添加特殊的样式。</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>Selector : link { sRules }</code></pre>

设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性（特性）的a对象，此伪类不发生作用。
<br >
<strong>:visited 伪类向已访问的链接添加特殊的样式。</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>Selector : visited { sRules }</code></pre>

设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性（特性）的a对象，此伪类不发生作用。
<br >
<strong>:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>Selector : hover { sRules }</code></pre>

设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。
<br >
<strong>:active 伪类向激活的元素添加特殊的样式。(:active 在鼠标点击与释放之间发生的事件)</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>Selector : active { sRules }</code></pre>

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

<h2>定义和用法：</h2>

<span style=“color:#00BFFF; font-size:16px;”><strong>:link 伪类向未访问的链接添加特殊的样式。</strong></span>
这个伪类应用于尚未访问过的链接；也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。
<pre class=“line-numbers language-css”><code class=“language-css”>a:link { font-size:14px; text-decoration:underline; color:#000000; } </code></pre>
<br >
<span style=“color:#00BFFF; font-size:16px;”><strong>:visited 伪类向已访问的链接添加特殊的样式。</strong></span>
<pre class=“line-numbers language-css”><code class=“language-css”>a:visited { font-size: 14px;text-decoration:underline; color:#ff0000; } </code></pre>
<br >
<span style=“color:#00BFFF; font-size:16px;”><strong>:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。</strong></span>
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
<pre class=“line-numbers language-css”><code class=“language-css”>a:hover { font-size:14pt; text-decoration:underline; color:#00bfff; }
<span style=“color:#69d2f9; font-size:16px;”>a:hover span{ color:red; } </code></pre>
<br >
<span style=“color:#00BFFF; font-size:16px;”><strong>:active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。</strong></span>
这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。
<pre class=“line-numbers language-css”><code class=“language-css”>a:active { font-size:14px; text-decoration:underline; color:#ee82ee; }</code></pre>
<br >
<span style=“color:#ff0000;”>注：</span>为了产生预期的效果，在 CSS 定义中，<span style=“color:#69d2f9;”><strong>a:hover</strong></span> 必须位于 <span style=“color:#69d2f9;”><strong>a:link</strong></span> 和 <span style=“color:#69d2f9;”><strong>a:visited</strong></span> 之后，<span style=“color:#69d2f9;”><strong>a:active</strong></span> 必须位于 <span style=“color:#69d2f9;”><strong>a:hover</strong></span> 之后！