jQuery 为什么 ::before 伪元素和 :visited 伪类不起作用

在本文中，我们将介绍为什么在使用 ::before 伪元素时，与 :visited 伪类一起使用时不起作用。并且我们将通过示例来说明这个问题。

阅读更多：jQuery 教程

了解 ::before 伪元素和 :visited 伪类

在了解为什么 ::before 伪元素和 :visited 伪类不起作用之前，我们首先需要了解这两个概念。

::before 伪元素

::before 是 CSS 中的一个伪元素，它可以在一个元素的内容前插入一个虚拟元素。这个虚拟元素可以通过 CSS 进行样式设置，例如改变其大小、颜色、背景等。它通常用于在元素之前插入一些额外的样式或内容，而无需修改原始 HTML 代码。

例如，以下是如何通过 ::before 伪元素在一个段落前插入一个 “(前言)” 字符：

<style>
  p::before {
    content: "(前言)";
  }
</style>

<p>这是一段正文。</p>

上述代码将会渲染为：

“(前言)这是一段正文。”

:visited 伪类

:visited 是 CSS 中的一个伪类，它可以选择在用户已访问过的链接上应用特定的样式。例如，可以使用 :visited 伪类来修改已访问链接的颜色或背景。

以下是一个示例，将已访问的链接颜色修改为红色：

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

<a href="https://example.com">示例链接</a>

在用户访问了该链接后，该链接的颜色将会变为红色。

为什么 ::before 伪元素和 :visited 伪类不起作用？

根据 CSS 规范，当 ::before 伪元素与 :visited 伪类一起使用时，为了保护用户的隐私，浏览器会对 ::before 伪元素进行一些限制。

因为 ::before 伪元素可以插入任意内容，包括可能会泄露用户访问历史的内容。所以，为了防止这种情况发生，浏览器会限制 ::before 伪元素在 :visited 伪类的上下文中的样式设置。

这种限制是为了防止网站滥用用户的隐私信息，例如通过修改已访问链接的样式来获取用户的浏览历史。这种限制通常适用于 ::before 伪元素和其他可能访问用户隐私信息的伪元素和伪类。

示例解释

让我们通过以下示例来详细说明为什么 ::before 伪元素和 :visited 伪类不起作用。

<style>
  a::before {
    content: "前言";
  }

  a:visited::before {
    content: "已访问的链接";
    color: red;
  }
</style>

<a href="https://example.com">示例链接</a>

在上述示例中，我们在一个链接之前插入了一个 ::before 伪元素来显示 “前言”。然后，我们使用 :visited 伪类来为已访问的链接的 ::before 伪元素设置不同的内容（”已访问的链接”）和颜色（红色）。

然而，你会注意到无论你是否访问过链接，这两个样式都不起作用。这是因为浏览器限制了这种使用场景。无论我们对 ::before 伪元素和 :visited 伪类进行什么样的样式设置，都无法影响到这个链接的样式。

总结

在本文中，我们了解了 ::before 伪元素和 :visited 伪类的概念，并且解释了为什么在考虑用户隐私的前提下，这两个特性不能同时使用。浏览器针对这种情况进行了限制，以保护用户的隐私信息。请记住，在设计网页时要注意遵守这些规定，以确保用户的隐私安全。