rel="alternate stylesheet"实现主题切换需明确三类link行为：无title的stylesheet始终生效；有title的stylesheet为首选样式；alternate stylesheet默认disabled，须JS设disabled=false才启用，且必须统一加唯一title属性。
rel="alternate stylesheet" 不是“一键换肤”的银弹，但它确实能用原生 HTML + 少量 JS 实现主题切换，前提是理解清楚三类 link 的行为差异——否则页面会加载错样式、切换失效、甚至所有主题都不生效。
为什么 rel="alternate stylesheet" 默认不生效
浏览器只把 rel="stylesheet" 且带 title 属性的 link 当作“首选样式”，而 rel="alternate stylesheet" 的本质是“备选但禁用”。它会被下载（注意：不是懒加载），但初始时 disabled 属性为 true，CSS 规则完全不参与渲染。
常见错误现象：
- 页面始终只显示第一个
rel="stylesheet"的样式，不管怎么点切换按钮 - 切换后背景/颜色没变，检查控制台发现对应
link元素的disabled仍为true - 手动在 DevTools 里把
disabled改成false立刻生效 → 说明 CSS 文件路径和内容都没问题
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须给每个
link都加title属性，且值唯一（如title="dark"、title="light"） -
rel="stylesheet"且无title的link（如重置样式）永远生效，不可被切换影响 -
rel="stylesheet"且有title的link，只会在没有其他启用样式时“兜底”，但它的disabled默认是false，容易和alternate混淆
如何正确获取并切换 link 的 disabled 状态
不能靠索引硬写 links[0].disabled = false —— DOM 顺序不稳定，link 标签位置一变就崩。
推荐做法是按 title 精确匹配：
使用 document.querySelectorAll('link[title]') 获取所有可切换样式表
遍历它们，对每个元素执行：theme.disabled = (theme.title !== targetTitle)
确保目标 link 的 title 和触发操作的值完全一致（大小写敏感、空格敏感）
示例片段：
function setActiveTheme(themeName) {
document.querySelectorAll('link[title]').forEach(link => {
link.disabled = link.title !== themeName;
});
}
// 调用：setActiveTheme('dark');注意：
- 不要漏掉“关闭其他主题”这步，否则可能多个
link同时disabled=false，造成样式冲突 - 如果页面有非主题类的
link[title]（比如打印样式），需加额外判断，例如link.rel.includes('stylesheet')
disabled 切换后样式不更新？检查这几个地方
这不是 JS 执行失败，而是浏览器层面的限制或误配置：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
link 的 href 路径 404 或跨域 → 控制台会报 Failed to load resource，但 disabled 仍可设为 false，只是没样式可用
同一时刻启用了多个 rel="stylesheet"（非 alternate）且带 title → 浏览器只认第一个，后面的被忽略，导致你以为切换了但实际没生效
CSS 文件里用了 @import 且导入路径错误 → 主文件加载成功，但子样式未注入，视觉上像“没切换”
页面通过 file:// 协议打开 → 浏览器禁止加载本地 CSS（除非显式允许），link 会静默失败，DevTools Network 面板看不到请求
验证方式：打开 DevTools → Elements → 找到对应 link → 查看其 disabled 值是否已更新；再切到 Network，筛选 CSS，确认该 href 是否返回 200。
比起 alternate stylesheet，更推荐什么
rel="alternate stylesheet" 的最大问题是：它强制下载所有主题 CSS，哪怕用户只用一个。对移动端、弱网环境不友好；也无法做主题内变量控制（比如仅改色值而不重载整套规则）。
真正易维护、可扩展的做法是：
预加载所有主题规则进单个 CSS 文件，用 :root 变量 + html[data-theme="dark"] 类控制
JS 只负责切换 document.documentElement.dataset.theme，不操作 link 或网络请求
配合 localStorage 记住上次选择，刷新不丢失
rel="alternate stylesheet" 适合原型验证、小项目快速上线，或需要兼容旧浏览器（IE9+）的场景。但只要项目稍具规模，就该转向 class 驱动方案——它不依赖 link 加载顺序，不引入额外 HTTP 请求，也不受 disabled 状态同步时机影响。
真正容易被忽略的，不是怎么写 disabled=true，而是没意识到：主题切换的本质不是“换文件”，而是“激活某组规则”。文件只是载体，规则才是核心。
