由于浏览器安全限制，javascript 无法通过 `getcomputedstyle()` 获取 `:visited` 伪类中设置的 css 自定义属性（如 `--visitedlink1`），且 `:visited` 中声明的 css 变量本身不会生效，导致动态判断链接访问状态失败。
在构建类似 Google 的搜索界面时，你可能希望根据用户是否已访问过某个链接，动态更新其样式（如变色）和关联的 tooltip 文案（如显示“Visited”）。直觉上，你会尝试在 a:visited 中设置一个 CSS 自定义属性（例如 --visitedLink1: true），再用 JavaScript 读取该变量来控制 tooltip 内容。但这在技术上不可行——不仅 getComputedStyle() 在 :visited 上返回的是 :root 或普通规则的值，而且CSS 规范明确禁止在 :visited 中设置自定义属性。
? 为什么 :visited + CSS 变量不工作？
隐私保护强制限制：
浏览器（Chrome、Firefox、Safari）禁止 JavaScript 访问任何可能泄露用户浏览历史的信息。getComputedStyle(el).color 在 :visited 链接上始终返回非 :visited 状态的值（如 rgb(0, 0, 255) 而非 rgb(128, 0, 128)），这是故意设计的安全沙箱。-
CSS 变量在 :visited 中被忽略：
即使你在样式表中写了：a#link1:visited { --visitedLink1: true; /* ❌ 无效！该声明会被浏览器静默丢弃 */ color: purple; }浏览器会应用 color: purple（仅限有限属性），但*完全忽略所有 `--自定义属性声明**。因此cs.getPropertyValue('--visitedLink1')永远返回空字符串或:root定义的默认值（如"false"`），无法反映真实访问状态。
✅ 可靠的替代方案：使用 localStorage + pagehide/visibilitychange
由于前端无法直接探测 :visited 状态，需借助用户行为+持久化存储实现近似效果：
// 初始化：检查 localStorage 中是否已标记为已访问
function updateTooltipForLink(linkId, url) {
const link = document.getElementById(linkId);
const tooltip = document.getElementById("tt");
// 从 localStorage 读取访问记录（注意：需保证 URL 标准化）
const visited = JSON.parse(localStorage.getItem("visitedLinks") || "{}");
const isVisited = visited[url] === true;
if (isVisited) {
tooltip.innerHTML = "Visited";
link.style.color = "purple"; // 可选：同步视觉反馈
} else {
tooltip.innerHTML = "Not visited";
link.style.color = "blue";
}
}
// 页面加载时初始化 tooltip
const link1 = document.getElementById("link1");
const targetUrl = link1.href;
updateTooltipForLink("link1", targetUrl);
// 监听链接点击（可选：提前标记，避免跳转后丢失状态）
link1.addEventListener("click", () => {
const visited = JSON.parse(localStorage.getItem("visitedLinks") || "{}");
visited[targetUrl] = true;
localStorage.setItem("visitedLinks", JSON.stringify(visited));
});
// 更健壮的做法：监听页面卸载（适用于用户在目标页停留后返回）
window.addEventListener("pagehide", () => {
// 若当前是目标页返回，可在此处触发更新（需配合 history.state 或 referrer 判断）
});⚠️ 注意事项： localStorage 是同源的，确保跳转目标页与主站同源（否则无法共享状态）；跨域场景需服务端支持（如 Cookie + 后端日志）。 :visited 支持的 CSS 属性极少（仅 color, background-color, border-color, outline-color, column-rule-color 等），且必须是非渐变、非 transparent、非 currentcolor 的显式颜色值。 不要依赖 document.referrer 判断来源——它不可靠（可能为空、被屏蔽或伪造）。
? 总结
| 方案 | 是否可行 | 原因 |
|---|---|---|
| getComputedStyle(...).getPropertyValue('--var') on :visited | ❌ 不可行 | 浏览器阻止读取 :visited 样式，且变量声明被忽略 |
| :visited { --var: ... } | ❌ 无效 | CSS 规范禁止在 :visited 中定义自定义属性 |
| localStorage + 点击标记 | ✅ 推荐 | 客户端可控、无隐私风险、兼容性好 |
| IntersectionObserver + document.hasFocus() | ❌ 无关 | 无法判断历史访问，仅能感知当前可见性 |
最终，放弃对 :visited 的 JavaScript 干预，转向基于用户交互与本地存储的状态管理，才是构建可维护、安全、符合规范的“已访问提示”功能的正确路径。
立即学习“前端免费学习笔记（深入）”；
