link标签引入外部主题样式必须写在<head>内，否则导致FOUC、媒体查询失效及SSR hydration mismatch；rel="stylesheet"必须严格拼写（全小写、无空格）、href用根相对路径，且多主题需用media或disabled控制启用。
link标签引入外部主题样式必须写在里
放在
中会导致主题样式延迟应用，页面先以默认或基础样式渲染，等主题CSS加载完再重绘——文字跳、按钮错位、媒体查询失效，尤其在深色模式切换时明显。服务端渲染（如Next.js）还会因首屏HTML与客户端样式不一致触发hydration mismatch。rel="stylesheet"是主题生效的硬性开关，拼写和大小写都不能错
浏览器只认rel="stylesheet"才会解析并应用CSS。写成rel="style"、rel="theme"、rel="stylesheet "（末尾空格）或REL="STYLESHEET"（大写），整条<link>都会被静默忽略——Network面板里压根看不到请求，控制台也不报错，调试时极易误判为路径或服务器问题。
- 正确写法：
<link rel="stylesheet" href="/css/dark-theme.css"> - 错误示例：
<link rel="alternate stylesheet" href="dark.css">（这是备用样式，需JS手动启用） - 错误示例：
<link rel="import" href="dark.css">（已废弃，不支持CSS加载）
href路径必须对，推荐用根相对路径
路径不是按当前URL算的，而是以HTML文件所在目录为基准。比如/blog/article.html里写href="css/dark.css"，浏览器实际请求的是/blog/css/dark.css，而不是你想要的/css/dark.css。
- 开发时打开浏览器Network面板，点404的CSS请求，看“Initiator”列就能定位是哪个
<link>写错了 - 推荐统一用根相对路径：
href="/css/dark-theme.css"（开头带/） - CDN资源可用绝对URL：
href="https://cdn.example.com/css/dark.min.css"，但记得加integrity校验 - Linux服务器注意大小写：
Dark.css≠dark.css
多个主题样式要靠media或disabled控制启用时机
不能靠多个rel="stylesheet"同时加载再用JS切换——它们会全部构建CSSOM，互相覆盖，且无法真正“禁用”。想实现主题切换，得用以下方式之一：
立即学习“前端免费学习笔记（深入）”；
- 用
media属性做条件加载：<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)"> - 初始设
disabled，JS动态启用：<link rel="stylesheet" href="dark.css" disabled>，然后link.disabled = false - 避免在CSS里用
@import引入其他主题文件——它串行阻塞，多一次HTTP往返，且无法被preload优化
真正容易被忽略的是：主题样式不是“加进去就生效”，它依赖rel属性的精确拼写、路径的严格计算、以及加载时机的显式控制——漏掉任一环，页面看起来“没反应”，其实浏览器早就把它当普通链接扔掉了。
