可以，需用<link>的media属性声明标准媒体查询字符串，如media="prefers-color-scheme: dark"；浏览器仅匹配时下载应用，不响应系统切换，旧版浏览器或强制color-scheme会阻止加载。
暗色模式 CSS 能否用 <link> 配合 prefers-color-scheme 媒体查询加载？
可以，但必须用 media 属性声明，不能靠 CSS 内部的 @media。浏览器只在解析 <link> 标签时检查其 media 值，匹配成功才下载并应用该样式表。
<link> 的 media 值怎么写才生效？
必须写成标准媒体查询字符串，且区分大小写、空格敏感。常见错误是漏掉括号或写成 CSS 语法（比如加 @media 前缀）。
-
media="prefers-color-scheme: dark"✅ 正确 -
media="(prefers-color-scheme: dark)"✅ 也正确（括号可选，但建议加上，更符合规范） -
media="@media (prefers-color-scheme: dark)"❌ 多余@media，完全不匹配 -
media="dark"❌ 不是有效媒体类型，会被忽略
<link rel="stylesheet" href="light.css" media="prefers-color-scheme: light"> <link rel="stylesheet" href="dark.css" media="prefers-color-scheme: dark">
两个 <link> 同时存在，会不会冲突或重复计算？
不会。浏览器按 media 匹配结果决定是否启用某条链接：只启用当前系统主题匹配的那一个；另一个被忽略（不下载、不解析、不参与层叠）。但要注意：
- 如果用户切换系统主题，已加载的样式不会自动重载 ——
<link>是一次性判断，不响应变化 - 想动态响应，得用 JavaScript 监听
matchMedia('(prefers-color-scheme: dark)')并手动切换disabled属性 - 若同时提供
media="all"的基础样式表，它始终生效，作为通用层叠起点
为什么有时 dark.css 没加载，即使系统是暗色模式？
常见原因有三个：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不支持
prefers-color-scheme（如 Chrome < 76、Safari < 12.1、Firefox < 67），此时所有带该 media 的<link>都被跳过 - 页面用了
<meta name="color-scheme" content="light only">等强制锁定声明，可能干扰系统偏好读取 -
dark.css本身有语法错误或 404，浏览器静默失败，控制台会报Failed to load resource，但不会提示媒体查询问题
调试时打开 DevTools → Network，筛选 CSS，看对应文件是否发起请求；再看 Application → Rendering → Emulate CSS media feature，手动切换验证 media 是否触发。
