由于浏览器安全限制，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：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
a.visited {
color: purple;
--visitedLink1: true; /* 此变量仅作样式参考，非用于 JS 读取 */
}? 提示：localStorage 是持久化方案；若只需会话级记录，可用 sessionStorage 或内存对象（但刷新即丢失）。
方案二：服务端标记（适用于 SSR 或全栈应用）
由后端在渲染 HTML 时直接注入 visited 类或 data-visited="true" 属性，前端仅做样式响应：
立即学习“前端免费学习笔记（深入）”；
<a id="link1" href="https://www.scouting.org" data-visited="true">scouting.com</a>
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 样式仅影响 <a>、<area> 和 <link> 元素，且必须有 href 属性且其值为有效 URL。
- 若需复杂交互（如批量管理访问状态），建议封装为工具函数或使用轻量状态库（如 useVisited React Hook）。
总之，绕过 :visited 的 JS 限制，应转向客户端存储 + 显式状态管理，而非试图“破解” CSS 伪类。这是安全、标准且可维护的工程实践。
