CSS 检测链接上的 :visited 样式，以及更快的方法

在本文中，我们将介绍如何检测链接上的 :visited 样式，而无需直接检查它，或者通过更快的方式来实现。

阅读更多：CSS 教程

1. 使用 JavaScript 直接检查链接是否包含 :visited 样式

在 CSS 中，可以通过 :visited 选择器来设置链接访问过的样式。然而，由于安全性原因，JavaScript 不能直接访问 DOM 元素上的计算样式。因此，我们需要一种方法来间接地检查这些样式。

为了检查链接是否应用了 :visited 样式，我们可以使用 getComputedStyle 和 getPropertyValue 来获取链接元素的计算样式，然后判断是否包含特定的属性值。

以下是一个示例代码：

const link = document.querySelector("a");
const styles = getComputedStyle(link);
const visitedColor = styles.getPropertyValue("color");

if (visitedColor === "rgb(0, 0, 238)") {
  console.log("链接已访问过");
} else {
  console.log("链接未访问过");
}

上述代码首先选择文档中的第一个链接元素，并获取其计算样式。然后，我们通过 getPropertyVaue 方法获取链接元素的颜色属性，并将其与表示访问过的颜色进行比较。如果相同，则说明链接已访问过。

此方法可以用于检查 :visited 样式，但可能不是最快的方法，因为涉及到 DOM 计算。接下来，我们将介绍一种更快的方法来实现相同的功能。

2. 使用伪元素 ::before 和 getComputedStyle 检测 :visited 样式

通过伪元素和 getComputedStyle 方法结合使用，我们可以更快速地检查链接是否应用了 :visited 样式。这种方法利用了伪元素可以访问到链接元素的计算样式，并且伪元素的计算样式与其所属元素是一致的。

以下是一个示例代码：

const link = document.querySelector("a");
const visitedColor = window.getComputedStyle(
  link, "::before"
).getPropertyValue("color");

if (visitedColor === "rgb(0, 0, 238)") {
  console.log("链接已访问过");
} else {
  console.log("链接未访问过");
}

上述代码使用伪元素 ::before 来获取链接元素的计算样式。通过将 ::before 作为第二个参数传递给 getComputedStyle 方法，我们可以获取到链接元素应用在 ::before 上的样式。然后，我们通过 getPropertyVaue 方法获取 ::before 的颜色属性，并将其与表示访问过的颜色进行比较。

通过使用伪元素和 getComputedStyle 方法进行检测，我们可以更快速地判断链接是否应用了 :visited 样式。