跳到主要内容位置

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 来对特定的元素设置特殊的样式。