CSS 链接相关伪类选择器

CSS 链接相关的伪类，主要用于选择超链接 <a> 元素的状态。超链接一般有未访问状态、和访问后的状态，浏览器默认会给超链接设置一些样式，例如字体颜色，下划线，当用户点击超链接后，浏览器会把它的字体设置成其它颜色。CSS 链接相关的伪类还有根据当前页面 url，选择 id 与 url # 后面部分相同的元素。

常用的 CSS 链接相关的伪类有如下几种：

• :link：选择未被访问过的链接。
• :visited：选择已被访问过的链接。
• :target：选择 id 与当前页面 url # 后面部分，相同的元素。

接下来分别看一下它们的用法。

:link

:link 用于选择还没有被访问过的超链接元素，例如下方代码所示：

<style>
  a:link {
    color: red;
  }
</style>

<nav>
  <a href="#link1">链接1</a>
  <a href="#link2">链接2</a>
  <a href="#link3">链接3</a>
</nav>

预览：

在没点击链接之前，所有的超链接都改成了红色，当点击某个链接之后，它会变成浏览器默认的，已访问的链接的颜色（注意这里的示例点击链接后会再加载一次本页面，可以点击后退，再来查看效果）。

:visited

:visited 就是给已访问的链接设置样式的，把浏览器默认的样式覆盖，例如可以把上例修改一下，在点击链接后，把链接的颜色改成其它颜色：

<style>
  a:visited {
    color: green;
  }
</style>

<nav>
  <a href="#link1">链接1</a>
  <a href="#link2">链接2</a>
  <a href="#link3">链接3</a>
</nav>

预览：

这里使用了 :visited 伪类选择器，选择了所以已访问过的链接，然后把它们的文字颜色改成了绿色。

:target

有时候，我们经常在 <a> 元素的 href 属性指定的 url 的最后，写上一段 # 开头的字符，例如：

<a href="http://www.example.com/index.html#top">链接</a>

这里的 url 中有 #top 字符串，这时，如果当前页面有 id 为 top 的元素，那么页面就会直接滚动到该元素处。那么:target 伪类选择器，就是用于选择 id 为 top 这样的元素的，当 url 中包括 #top 字样，那么这个元素就会被选中，例如下方代码所示：

<style>
  p:target {
    color: red;
  }
</style>

<nav>
  <a href="about:srcdoc#link1">链接1，href 为 #link1</a>
  <p id="link1">这是 id 为 link1 的段落。</p>
</nav>

预览：

示例中 p 元素默认是黑色的文字，但是在点击链接之后，它的文字就会变成红色，这是因为 a 的 href 属性为 #link1 结尾，点击之后当前页面的 url 包含了 #link1，这时 :target 伪类选择器就会寻找 id 为 link1 的 p 元素，找到之后把它的文字设置为红色。

小结

CSS 链接相关的伪类选择器，一部分用于选择 HTML <a/> 元素的不同状态，例如 :link 表示链接还未访问，:visited 表示链接已经被访问。另一部分，用于选择和 url 相关的元素，例如选择 id 与 url # 后面字符相同的元素。通过 CSS 链接相关的伪类选择器，我们就能覆盖浏览器对链接设置的默认样式，还能根据 url 来对特定的元素设置特殊的样式。