由于浏览器安全限制，javascript 无法通过 `getcomputedstyle()` 获取 `:visited` 伪类中设置的 css 自定义属性值，且 `:visited` 中声明的 css 变量本身不会生效——这是为防止历史访问信息泄露而强制实施的隐私保护机制。

在构建类似 Google 的搜索结果页时，你可能希望根据链接是否被用户访问过（即 :visited 状态）动态更新 UI 元素（如 tooltip 文案、颜色或图标）。但需明确一个关键事实：CSS 自定义属性（--my-var）不能在 :visited 选择器中可靠设置或读取，且 getComputedStyle() 对 :visited 相关样式的访问被浏览器严格限制。

? 为什么 --visitedLink1 始终返回 :root 值？

根据 MDN 官方说明，为防止网站通过样式探测用户浏览历史（即“history sniffing”攻击），现代浏览器（Chrome、Firefox、Safari）对 :visited 的样式访问做了如下限制：

• getComputedStyle(element).color、.backgroundColor 等可继承属性在 :visited 下始终返回与未访问状态相同的值（如 rgb(0, 0, 255) 而非 rgb(128, 0, 128)）；
• CSS 自定义属性完全无法在 :visited 中生效：即使你在 a:visited { --visitedLink1: true; } 中声明，该变量也不会被计算、继承或暴露给 JavaScript；
• 因此 cs.getPropertyValue('--visitedLink1') 永远只返回 :root 或父级作用域中定义的默认值（如 "false"），绝不会反映 :visited 的逻辑状态。

✅ 正确替代方案：用 localStorage + beforeunload/pagehide 模拟访问状态

由于无法从 CSS 或 getComputedStyle 获取真实访问状态，你需要主动记录用户行为：

// 页面加载时检查并应用已访问状态
function initVisitedState() {
  const link = document.getElementById("link1");
  const href = link.href;
  const isVisited = localStorage.getItem(`visited:${href}`) === "true";

  if (isVisited) {
    link.classList.add("visited");
    updateTooltip("Visited");
  }
}

// 用户点击链接前记录（适用于单页应用或需提前标记场景）
document.getElementById("link1").addEventListener("click", function(e) {
  localStorage.setItem(`visited:${this.href}`, "true");
});

// 更健壮的做法：监听 pagehide（兼容跨页跳转）
window.addEventListener("pagehide", () => {
  // 若当前页面是目标链接的来源页，可在此处同步状态（按需）
});

// 鼠标悬停时动态更新 tooltip
document.getElementById("link1").addEventListener("mouseenter", function() {
  const isVisited = localStorage.getItem(`visited:${this.href}`) === "true";
  updateTooltip(isVisited ? "Visited" : "Not visited");
});

function updateTooltip(text) {
  const tt = document.getElementById("tt");
  if (tt) {
    tt.textContent = text;
  }
}

对应 CSS 可简化为：

a.visited {
  color: purple;
}

/* 移除无效的 :visited 变量声明 */
/* a:visited { --visitedLink1: true; } ← 不要这样写 */

⚠️ 注意事项与最佳实践

• ❌ 不要依赖 :visited 设置 CSS 变量：它在所有主流浏览器中均被忽略；
• ❌ 不要尝试用 getComputedStyle(...).getPropertyValue() 检测 :visited 状态：返回值不可靠且受隐私策略屏蔽；
• ✅ 使用 localStorage / IndexedDB 记录显式访问行为（用户点击、fetch() 成功后等）；
• ✅ 对敏感域名（如银行、邮箱）注意同源策略：localStorage 仅限同协议+域名+端口；
• ✅ 考虑服务端状态同步：若需全站一致的访问标记（如登录用户历史），应由后端 API 返回 is_visited: true 字段；
• ✅ 无障碍友好：为 .visited 链接添加 aria-label="scouting.com — visited" 提升可访问性。

通过将状态管理交还给 JavaScript 并配合持久化存储，你不仅能绕过浏览器限制，还能获得更可控、可测试、可扩展的访问状态逻辑——这才是现代 Web 应用中处理 :visited 场景的推荐方式。