与超链接(a元素)息息相关的4种伪类选择器，你都用过吗？

一碗周
473 阅读3分钟

这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十三篇-《与超链接(a元素)息息相关的4种伪类选择器》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章我们将来学习与超链接(a元素)息息相关的哪些伪类选择器，本篇文章涉及的内容如下所示：

导读.png

:link伪类选择器

CSS中提供的:link伪类选择器用于选中那些没有被访问过的<a>元素，且<a>元素必须包含href属性。如下示例代码展示了:link伪类选择器的用法：

a:link {
    color: red;
}

其实上面的用于直接使用a标签选择器也是可以实现的，示例代码如下：

a {
    color: red;
}

代码运行结果如下所示：

01_link伪类.png

其实在实际的开发中:link伪类很少使用，一般都是使用a标签选择器直接代替。

tips ：可以通过使用:link伪类选择器来实现<a>元素是否被禁用的效果(被禁用时移除href属性)。

:visited伪类选择器

CSS提供的:visited伪类选择器用于选中已经被访问过的链接。该伪类选择器限制非常的多，具体如下：

  • 允许使用的CSS属性非常有限，只允许使用一些颜色相关的属性，例如color、background-color、border-color等。

  • 设置颜色时，如果使用rgba()或者hsla()设置透明的颜色时，a即αlpha的有效值只有0和1

  • 该元素设置的属性必须是链接元素本身有的属性。也就是说:visited伪类选择器只能对链接的样式进行重置而不能自己设置。

如下代码展示了:visited伪类选择器的用法：

HTML结构如下：

<body>
    <a href="" class="visited1">该元素设置了background-color属性</a>
    <hr />
    <a href="" class="visited2">该元素没有设置background-color属性</a>
</body>

CSS代码如下：

.visited1 {
    color: violet;
}
.visited2 {
    color: violet;
    /* 设置一个背景颜色，不然 :visited伪类的背景颜色会失效 */
    background-color: red;
}

a:visited {
    color: #666;
    background-color: lawngreen;
}

代码运行结果如下所示：

02_visited伪类.png

tips：这里的访问过与没有访问过主要在于href属性的值是否为空。

还有就是由于CSS中是存在着优先级的概念，为了防止有些伪类的效果被覆盖，约定的一个顺序就是:link — :visited — :hover — :active。

关于:hover伪类的:active伪类我们后面学习。

:any-link伪类选择器

CSS中提供的:any-link选择器会匹配所有包含href属性的元素，不管有么有被访问过。

包含href属性的元素有<a>、<link>和<area>元素。由于<link元素是隐藏不显示的(准确的说其display属性值为none)，<area>元素基本不用。所有说:any-link伪类使用的只用<a>元素。

如下代码展示了:any-link伪类的用法：

a:any-link {
    color: tomato;
}

代码运行结果如下所示：

03_any-link伪类.png

其实webkit内核的浏览器<a>元素的默认样式就是通过any-link伪类的实现的，如下图：

04_webkit内核a元素默认样式.png

:target伪类选择器

CSS中提供的:target伪类是与锚点最为密切的一个伪类选择器，该伪类会匹配与当前锚点一致的那个元素。

关于什么是锚点以及用法在上一篇文章有所介绍，传送门HTML中的超链接(a元素)用法详解 (juejin.cn)

如下代码展示了:target伪类的用法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>target伪类</title>
        <style>
            h1:target {
                color: lightcoral;
                font-size: 2.4em;
            }
        </style>
    </head>
    <body>
        <a href="#third">跳转到第三个h标签</a>
        <h1>第一个h标签</h1>
        <h1>第二个h标签</h1>
        <h1 id="third">第三个h标签</h1>
        <h1>第四个h标签</h1>
        <h1>第五个h标签</h1>
    </body>
</html>

代码运行结果如下所示：

05_target伪类.gif

总结

与超链接相关的伪类选择器(总结).png

预告：下一篇文章我们将来学习HTML中的图片与CSS中的背景图片

avatar
文章
阅读
粉丝