深色背景上超链接看不清需同时处理状态、对比度和深色模式适配三件事：必须完整声明LVHA四种伪类并按序书写，确保各状态颜色均满足WCAG 4.5:1对比度要求，且在@media (prefers-color-scheme: dark)中统一定义，避免:visited被忽略或框架样式覆盖。
深色背景上超链接看不清，不是颜色设错了，而是没处理状态、对比度和深色模式适配这三件事。
为什么只改 a { color: #007bff; } 在深色背景上还是发虚
浏览器默认的 a:link 和 a:visited 颜色（比如 #0000ee）在深灰/黑背景上对比度远低于 WCAG 要求的 4.5:1，人眼根本分辨不出。DevTools 的 “Contrast ratio” 工具一测就暴露：浅蓝文字配 #1e1e1e 背景，比值常卡在 2.3 左右。
- 别依赖纯色名如
blue或purple，它们在深色下几乎不可读 -
a选择器本身不覆盖a:visited，漏写它，用户点过一次链接就变灰隐形 - 如果页面用了 CSS 框架（如 Bootstrap），它的
a规则优先级可能更高，你的样式被划掉就得加权重或调整位置
a:link、a:visited、a:hover、a:active 必须全写且按 LVHA 顺序
只写 a:hover 没用——鼠标移上去才亮一下，其他时候还是糊的。必须显式声明全部四个状态，且严格按 :link → :visited → :hover → :active 顺序，否则 :visited 可能压住 :hover，悬停失效。
- 推荐统一色值快速生效：
a, a:link, a:visited, a:hover, a:active { color: #60a5fa; } - 若需区分已访问状态，
a:visited至少用#93c5fd这类更浅但对比仍达标的蓝，别用#6b7280这种灰 -
a:active建议加一点饱和度（如#3b82f6），让用户感知“真的点下去了”
深色模式下必须用 @media (prefers-color-scheme: dark)
光靠全局设色不行。系统切深色时，如果 CSS 没响应式判断，链接会沿用浅色模式下的规则，大概率又变糊。不能指望用户手动切主题。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 外部 CSS 中直接加媒体查询：
@media (prefers-color-scheme: dark) { a, a:link, a:visited, a:hover, a:active { color: #60a5fa; } } - 别把
:visited单独拎出来写在媒体查询外——浏览器为防隐私泄露，会强制忽略深色模式下对:visited的颜色重定义，必须包在@media里才生效 - 测试时用 Chrome DevTools 的 Rendering 面板勾选 “Emulate CSS prefers-color-scheme: dark”，别只靠眼睛看
内联 style="color: ..." 对深色背景链接基本无效
单个链接加 style="color: #60a5fa;" 只能管正常状态，:hover 和 :visited 依然走浏览器默认，悬停变蓝、点完变紫，跟背景一融就消失。
- 临时调试可用，但上线前必须迁移到
<style>或外部 CSS - 想局部控制？用 class 更靠谱：
<a href="#" class="dark-link">链接</a>，再配 CSS：.dark-link, .dark-link:link, .dark-link:visited, ... { color: #60a5fa; } - 千万别在内联里写
!important来硬顶，它对:visited也无效，纯属白忙
真正麻烦的是：深色背景不是换一个 color 值就能收工的事。状态、对比度、媒体查询、框架干扰——漏掉任意一环，用户就在某个点击路径里彻底看不见链接。动手前先开 DevTools 测一遍 contrast ratio，比猜强十倍。
