由于浏览器安全限制，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 场景的推荐方式。
