如何修改已下载的下载链接颜色？:visited伪类失效问题求助

问题原因 #

浏览器的:visited伪类受隐私机制限制，且当链接指向的资源被服务器设置为附件下载（返回Content-Disposition: attachment响应头）时，浏览器不会将该链接标记为已访问——因为没有发生实际的页面导航行为，所以普通的:visited样式对这类下载链接无效。

解决方案 #

方案1：用JavaScript手动跟踪下载状态

通过监听链接点击事件，手动给已触发下载的链接添加自定义类，再通过CSS设置该类的样式。

修改后的HTML链接：

<a href="http://example.com/files/someFile.csv" target="_blank" class="download-link">
    http://example.com/files/someFile.csv
</a>

JavaScript代码：

const downloadLinks = document.querySelectorAll('.download-link');

downloadLinks.forEach(link => {
    link.addEventListener('click', () => {
        // 标记为已点击，后续结合窗口焦点判断下载完成
        link.classList.add('clicked');
        // 兜底逻辑：延迟1秒标记为已下载（应对部分浏览器不触发focus的情况）
        setTimeout(() => {
            link.classList.add('downloaded');
        }, 1000);
    });
});

// 监听窗口回到焦点，确认用户完成下载操作
window.addEventListener('focus', () => {
    document.querySelectorAll('.download-link.clicked').forEach(link => {
        link.classList.add('downloaded');
        link.classList.remove('clicked');
    });
});

对应的CSS样式：

/* 默认未下载链接样式 */
.download-link {
    color: #0000ee;
}

/* 已下载链接样式 */
.download-link.downloaded {
    color: pink;
}

方案2：修改服务器响应头（仅适用于浏览器可预览的文件）

如果你能控制服务器配置，可将文件的响应头Content-Disposition从attachment改为inline，让浏览器直接预览文件而非强制下载。这种情况下，浏览器会将该链接标记为已访问，:visited伪类就能正常生效。

示例CSS（和你原来的代码一致）：

a:visited {
    color: pink;
}

注意：此方法仅适用于浏览器支持预览的文件类型（如CSV、图片、TXT等），且会改变用户的下载操作流程（需手动保存文件）。

内容的提问来源于stack exchange，提问作者user23087845