根本原因是颜色对比度不足、CSS变量未在暗色媒体查询中重定义、原生控件未通过color-scheme声明同步适配；必须在@media (prefers-color-scheme: dark)内完整重设--link-hover等变量并加fallback，用:focus-visible配合高对比度焦点环，且显式声明color-scheme: light dark。
暗黑模式下链接的 :hover、:active、:focus-visible 等伪类样式容易失效或不可见，根本原因不是“没写对”，而是颜色对比度不足、变量未重定义、或浏览器原生控件未同步适配。
为什么 :hover 和 :active 在暗色下几乎看不见
默认浅色主题下 a:hover 常用 #007bff 这类蓝调，但放到深灰背景（如 #121212）上，饱和度和亮度差太小，肉眼难分辨。更关键的是：CSS 变量（如 --link-hover）若只在 :root 定义一次，不会随 @media (prefers-color-scheme: dark) 自动切换。
- 必须在暗色媒体查询内完整重写所有相关变量：
@media (prefers-color-scheme: dark) { :root { --link-hover: #60a5fa; --link-active: #3b82f6; --link-focus: #818cf8; } } - 所有使用处加 fallback：
color: var(--link-hover, #007bff);，否则变量未生效时直接回退到浅色值，造成颜色错乱 - 避免用
rgba(…, 0.3)做 hover 背景——Safari 渲染 alpha 值不稳定，常导致“半透明变全透明”，文字直接叠在深色底上
:focus-visible 为什么在暗色下轮廓线消失
很多项目只写了 a:focus { outline: 2px solid #007bff; }，但没处理暗色下的对比度。系统切暗色后，#007bff 在 #1e293b 上的 WCAG 对比度仅约 2.1:1，远低于推荐的 4.5:1。
- 优先用
:focus-visible替代:focus，避免鼠标点击时也出轮廓：a:focus-visible { outline: 2px solid var(--focus-ring, #818cf8); } - 确保
--focus-ring在暗色查询中设为高亮色，例如#c084fc或#60a5fa，并带明确亮度（别用#374151这类近似背景色） - 如果用了 Tailwind，默认
focus:ring-blue-500在暗色下无效——需配合dark:focus:ring-indigo-400或自定义插件
disabled 链接（pointer-events: none）的 :hover 为何还触发
给 a 加了 class="disabled" 并设 pointer-events: none，但开发者仍习惯写 a.disabled:hover。这会导致两个问题：一是样式冗余（根本不会触发），二是当状态动态切换时，因选择器权重或缓存，旧 hover 样式可能残留。
立即学习“前端免费学习笔记（深入）”；
- 禁用状态应彻底剥离交互语义：
a[aria-disabled="true"] { pointer-events: none; color: var(--text-disabled, #64748b); }，不写:hover - 如果必须保留视觉反馈（如 Tooltip 提示），改用
title属性或 JS 监听mouseenter，而非依赖伪类 - 第三方组件（如 Ant Design 的
Menu.Item）禁用后仍响应 hover？检查是否漏了.ant-menu-item-disabled:hover的覆盖规则，且该规则必须在暗色查询内重定义
最易被忽略的一点：color-scheme: light dark 必须声明在 :root 或 html 上。否则即使链接伪类全写对了，原生 <a href="https://www.php.cn/link/c7b02e9e11f56f3518c3ca677149e6ee"></a> 的邮件图标、<a download></a> 的下载箭头等，在 Safari/Chrome 暗色系统下仍显示亮色边框——这不是你 CSS 的问题，是浏览器没收到“我支持暗色”的信号。
