CSS 自定义属性在 :visited 伪类中不可读取与修改的原因及替代方案_技术教程

由于浏览器安全限制，javascript 无法通过 `getcomputedstyle()` 获取 `:visited` 伪类中设置的 css 自定义属性（如 `--visitedlink1`），且该伪类本身也不支持声明 css 变量，导致动态判断链接访问状态失败。

在构建类似 Google 的搜索结果页时，你可能希望为已访问的链接添加视觉反馈（如变色）并动态更新 tooltip 文案（如显示“Visited”）。直觉上，你会尝试在 a:visited 中设置一个 CSS 自定义属性（例如 --visitedLink1: true），再用 JavaScript 读取它来控制 tooltip 内容。但这在技术上不可行——不仅 getComputedStyle() 对 :visited 中的变量返回 :root 或空值，而且CSS 规范明确禁止在 :visited 中声明自定义属性。

❌ 为什么 :visited + CSS 变量会失效？

安全限制：浏览器禁止 JavaScript 探测用户浏览历史。若允许读取 :visited 样式（包括变量），攻击者可通过反复检查不同链接的计算样式推断用户访问记录。
规范限制：CSS Values and Units Level 4 明确指出：::visited 伪类只能影响有限的样式属性（如 color, background-color, border-color, outline-color, column-rule-color, fill, stroke），不包括任何自定义属性。因此以下写法是无效的：
```
a:visited {
  --visitedLink1: true; /* ❌ 被忽略，无效果 */
  color: purple;         /* ✅ 允许 */
}
```

✅ 可靠的替代方案

方案一：利用 window.location.href + localStorage（推荐）

在页面加载时，检查当前 URL 是否已被访问过（需提前记录）：

// 页面加载时初始化访问状态
function initVisitedState() {
  const link = document.getElementById("link1");
  const href = link.href;
  const isVisited = localStorage.getItem(`visited:${href}`) === "true";

  if (isVisited) {
    link.classList.add("visited");
    document.getElementById("tt").textContent = "Visited";
  }
}

// 用户点击后标记为已访问（可选：也可在页面跳转前触发）
document.getElementById("link1").addEventListener("click", () => {
  localStorage.setItem(`visited:${this.href}`, "true");
});

// 鼠标悬停时动态更新 tooltip（基于 class 状态）
window.addEventListener('mousemove', (event) => {
  const link = document.getElementById("link1");
  const tt = document.getElementById("tt");
  tt.style.left = event.clientX + 10 + 'px';
  tt.style.top = event.clientY + 10 + 'px';

  if (link.classList.contains("visited")) {
    tt.textContent = "Visited";
  } else {
    tt.textContent = "Not visited";
  }
});

对应 CSS：

a.visited {
  color: purple;
  --visitedLink1: true; /* 此变量仅作样式参考，非用于 JS 读取 */
}

? 提示：localStorage 是持久化方案；若只需会话级记录，可用 sessionStorage 或内存对象（但刷新即丢失）。

方案二：服务端标记（适用于 SSR 或全栈应用）

由后端在渲染 HTML 时直接注入 visited 类或 data-visited="true" 属性，前端仅做样式响应：

scouting.com

const link = document.getElementById("link1");
if (link.dataset.visited === "true") {
  document.getElementById("tt").textContent = "Visited";
}

⚠️ 注意事项

不要依赖 :visited 的任何可计算样式进行逻辑判断（包括 color, background-color 等），因为现代浏览器对 getComputedStyle() 返回值做了模糊处理（如统一返回 rgb(0, 0, 0)）以防止指纹追踪。
:visited 样式仅影响、和元素，且必须有 href 属性且其值为有效 URL。
若需复杂交互（如批量管理访问状态），建议封装为工具函数或使用轻量状态库（如 useVisited React Hook）。