由于浏览器安全限制，javascript无法通过`getcomputedstyle()`获取`:visited`伪类中修改的css变量值，且css变量本身也不允许在`:visited`规则中声明——这是为防止历史访问信息泄露而强制实施的隐私保护机制。
在构建类似搜索引擎的交互界面（如Google风格链接状态提示）时，开发者常希望通过:visited改变样式并同步更新工具提示（tooltip）内容。但需明确：:visited是受严格隔离的CSS上下文——它仅允许极少数安全的CSS属性（如color、background-color、border-color等）被修改，且这些变更完全不可被JavaScript读取。更关键的是，CSS自定义属性（即--my-var）根本不能在:visited选择器中声明或赋值，即使语法上不报错，浏览器也会静默忽略。
例如，以下CSS无效：
a:visited {
--visitedLink1: true; /* ❌ 被浏览器忽略 */
color: purple; /* ✅ 允许且生效 */
}因此，getComputedStyle(el).getPropertyValue('--visitedLink1') 始终返回:root或父级作用域中的初始值（如"false"），绝不会反映:visited中的“覆盖”——因为该覆盖从未真正发生。
✅ 正确替代方案：使用localStorage + pagehide/pageshow事件
由于无法从CSS侧获取访问状态，应改用JavaScript主动管理访问记录：
立即学习“前端免费学习笔记（深入）”；
// 页面加载时检查链接是否已访问过
function checkVisited(url) {
const visited = JSON.parse(localStorage.getItem('visitedUrls') || '[]');
return visited.includes(url);
}
// 更新tooltip显示逻辑
function updateTooltip() {
const link = document.getElementById('link1');
const tooltip = document.getElementById('tt');
const url = link.href;
if (checkVisited(url)) {
tooltip.innerHTML = 'Visited';
} else {
tooltip.innerHTML = 'Not visited';
}
}
// 监听鼠标移动（保持原有交互）
window.addEventListener('mousemove', (e) => {
const tooltip = document.getElementById('tt');
tooltip.style.left = e.clientX + 10 + 'px';
tooltip.style.top = e.clientY + 10 + 'px';
updateTooltip();
});
// 记录访问：当用户离开当前页（跳转前）标记为已访问
document.getElementById('link1').addEventListener('click', function() {
const url = this.href;
const visited = JSON.parse(localStorage.getItem('visitedUrls') || '[]');
if (!visited.includes(url)) {
visited.push(url);
localStorage.setItem('visitedUrls', JSON.stringify(visited));
}
});⚠️ 注意事项： localStorage按源（origin）隔离，跨域链接（如https://scouting.org）的访问状态无法被当前页面写入或读取——这是同源策略的必然约束； 若需跨域感知，必须依赖后端服务存储用户行为，或使用<a>的rel="noreferrer"配合服务端日志； 不要尝试用document.visibilityState或beforeunload模拟，它们无法可靠捕获真实点击跳转； 所有:visited相关的视觉反馈（如颜色变化）仍可保留，仅JavaScript同步逻辑需独立实现。
综上，放弃通过CSS变量桥接:visited状态的思路，转而采用客户端持久化+显式事件追踪，才是符合规范、安全且可维护的实践路径。
