能换css，但必须用本地服务器（如live server）运行，不能双击打开；因file://协议无同源概念，浏览器会静默拦截所有含../等跨目录的css请求，导致样式失效。
能换，但必须走本地服务器，不能双击打开 HTML 文件。直接用 file:// 协议访问时，浏览器会拦截所有跨目录的 CSS 请求（哪怕只是 ../css/dark.css），控制台只显示 Not allowed to load local resource，不报 JS 错误，样式静默失效。
为什么双击打开的 HTML 切不了局域网 CSS
根本原因是协议限制：file:// 下没有“同源”概念，浏览器一律禁止加载任何相对路径指向父级或同级目录外的资源。即使 CSS 文件和 HTML 在同一台电脑上，只要路径含 ../ 或不在当前文件所在目录，就会被拦。这不是 bug，是安全策略。
- 现象：点击按钮后
link.href确实变了，但 Network 面板里该请求状态是(blocked) - 验证方式：把 HTML 放进
http://localhost:5500（如 VS Code Live Server）再试，立刻正常 - 替代方案：所有 CSS 放在 HTML 同目录下，用
href="dark.css"—— 但实际项目几乎不可行
切换时 href 要加时间戳防缓存
局域网环境（尤其是 Windows IIS、Python http.server）默认不强制刷新 CSS，改了 href 后浏览器可能复用旧缓存，导致样式没变。不是代码没执行，是资源没重拉。
- 正确写法：
link.href = "css/dark.css?v=" + Date.now() - 别用
Math.random()：Vite/HMR 开发服务器可能忽略它，Date.now()更稳 - 如果用 Webpack DevServer，可配
headers: { "Cache-Control": "no-cache" }全局禁缓存
如何避免切换瞬间白屏或回退到默认样式
闪屏不是 JS 慢，是浏览器卸载旧样式和加载新样式之间存在空窗。它不会等新 CSS 下完再删旧的，而是“先切 href，再异步加载”。
- 最简解法：预加载 +
disabled替代删 DOM
先插入一个<link rel="preload" as="style" href="css/dark.css">，再改目标link.href；加载完成前旧样式仍生效 - 更稳做法：新增一个
<link rel="stylesheet">，监听其load事件，触发后再设旧link.disabled = true - 绝对不要：
link.parentNode.removeChild(link)—— 会丢掉media、title等属性，且触发重排
真正容易被忽略的是路径基准和协议一致性：确保所有 CSS 路径都是相对于 HTML 当前 URL 的，且整个流程都在 http:// 或 https:// 下运行。一旦混用 file:// 和相对路径，问题就从“怎么写”变成“为什么完全没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
