通过为下载链接添加 target="_blank" 并配合 :visited 伪类，可实现下载后链接变色；但需注意浏览器安全限制导致 :visited 样式能力受限，且仅对真正进入浏览历史的链接生效。
通过为下载链接添加 target="_blank 并配合 :visited 伪类，可实现下载后链接变色；但需注意浏览器安全限制导致 :visited 样式能力受限，且仅对真正进入浏览历史的链接生效。
在网页开发中，常希望用户下载文件后，对应链接视觉上有所反馈（如变为粉色），以提升交互体验。但直接对 <a href="xxx.csv" download> 使用 a:visited { color: pink; } 往往无效——这是因为现代浏览器出于隐私保护，默认不将带 download 属性的链接写入浏览历史，而 :visited 伪类仅对已存在于历史记录中的 URL 生效。
✅ 正确做法是：移除 download 属性，改用 target="_blank"，使链接在新标签页打开（触发历史记录写入）。当用户点击并完成下载（例如服务器返回 Content-Disposition: attachment），该 URL 即被浏览器视为“已访问”，:visited 样式随之生效。
示例代码如下：
<style>
a:link { color: #007bff; }
a:visited { color: #ff69b4; /* 粉色，表示已下载 */ }
a:hover { color: #0056b3; }
</style>
<a href="https://file-examples.com/wp-content/storage/2017/02/file-sample_1MB.doc"
target="_blank"
rel="noopener">
下载示例 Word 文档（1MB）
</a>⚠️ 重要注意事项：
- download 属性与 :visited 不兼容：一旦使用 download，链接不会进入 history，:visited 永远不触发；
- target="_blank" 是关键：它确保链接在新上下文中打开，从而生成历史条目；
- 务必添加 rel="noopener"：防止新开页面通过 window.opener 访问原页面，提升安全性；
- 样式限制：出于隐私考虑，现代浏览器（Chrome/Firefox/Safari）对 :visited 可用 CSS 属性做了严格限制，*仅允许修改 color、background-color、border-color、outline-color 及少数 `text-` 属性**，不可读取或依赖其状态做逻辑判断；
- 跨域资源需注意 CORS：若链接指向跨域资源且无合适响应头，可能影响下载行为，但不影响 :visited 触发逻辑。
总结：要让下载链接支持“下载后变色”，本质是让浏览器将其识别为普通导航链接而非纯下载触发器。因此，放弃 download 属性，采用 target="_blank" + 服务端正确配置 Content-Disposition 头，是最可靠、兼容性最佳的方案。
