动态注入link标签加载样式必须满足三条件：插入head内、rel="stylesheet"、href可访问；media属性仅插入时判定一次，不响应变化；插入位置和顺序决定样式优先级。
link 标签动态注入能加载样式，但必须满足三个硬性条件：插入位置在 <head> 内、rel 值为 "stylesheet"、href 指向可访问的 CSS 路径。否则样式不会生效，甚至被浏览器静默忽略。
动态插入 link 必须放在 head 里，且不能晚于首次渲染
把 document.createElement('link') 创建的节点插到 document.body 或任意非 <head> 位置，多数现代浏览器会尝试加载，但 IE6–8 直接跳过，Safari 可能延迟应用或触发 FOUC（闪白）。更隐蔽的问题是：若 JS 在 window.onload 后才执行，此时 DOM 已渲染完毕，新样式无法回溯作用于已挂载元素。
- 正确做法：在
<head>中预留容器，或用document.head.appendChild(link)确保插入点明确 - 避免在 React/Vue 的
useEffect或mounted钩子中延迟插入——这些时机通常已过首屏渲染临界点 - 如果必须等某个异步条件（如用户登录后加载主题），建议提前在
<head>中插入一个空<link disabled>占位，后续只改href和移除disabled
media 属性在动态 link 中只在插入时判定一次
动态创建的 <link rel="stylesheet" media="(max-width: 768px)"> 不会监听屏幕尺寸变化。它只在 appendChild() 执行那一刻检查媒体查询是否匹配；不匹配则根本不会发起请求，也不会在之后自动补发。
- 想响应式切换？得手动监听
window.matchMedia，并在回调里替换整个<link>元素（不能只改href） - 常见错误：写
link.media = "(min-width: 1024px)"后期望自动生效——无效，media是插入时的静态判断依据 - 打印样式
media="print"动态插入后，仅在用户打开打印预览时才可能生效，且不保证立即重绘
多个动态 link 的加载顺序和覆盖规则
浏览器按 <link> 插入 DOM 的顺序解析 CSS，后插入的同选择器规则会覆盖先插入的。但这个“顺序”不是 JS 执行顺序，而是节点在 <head> 中的物理位置。
立即学习“前端免费学习笔记（深入）”；
- 如果同时插入两个
<link>，但第二个被插入到第一个之前（例如用insertBefore），那么第二个的样式优先级更高 - 动态插入的样式表，其
@import规则仍受阻塞影响，可能拖慢渲染；建议避免在动态 CSS 中嵌套@import - 想确保某套样式最终生效？给它加
id，后续切换时先remove()旧节点再插入新节点，避免残留冲突
调试时看不到 network 请求？先确认 media 是否匹配
Chrome DevTools 的 Network 面板里找不到你动态插入的 CSS 文件，大概率不是路径错或服务器问题，而是 media 属性不匹配当前环境，浏览器压根没发请求。
- 临时去掉
media属性测试是否能加载，确认路径和 CORS 正确 - 用
window.matchMedia("(max-width: 768px)").matches手动验证当前媒体查询结果 - 注意：移动端横屏时
device-width可能误报，优先用width而非device-width
动态注入 link 看似简单，但 media 判定时机、插入位置、节点替换逻辑这三点一旦出错，就容易变成“样式写了却没反应”的黑盒问题。最稳妥的做法是：能用静态 media 属性解决的，别动 JavaScript；必须动态时，优先替换整个节点而非只改属性。
