多个link标签是唯一原生支持并行加载CSS的方式；顺序决定层叠覆盖，media仅控制应用不阻止请求，上线前须合并压缩以避免性能损耗。
link 标签本身不支持“一个标签引入多个文件”，比如写成 <link rel="stylesheet" href="a.css,b.css"> 是无效的——浏览器根本不会解析逗号分隔的路径，请求直接失败。
必须用多个独立的 link 标签，每个对应一个 CSS 文件。这是唯一被所有浏览器原生支持、并行加载、无 JS 依赖的方式。
为什么多个 link 标签能并行加载？
现代浏览器对同一域名下的 link rel="stylesheet" 请求默认启用并行下载（通常 6–8 个并发连接），前提是它们是独立的标签，且没有阻塞资源（如同步脚本卡在 head 中）。这和 @import 的串行加载有本质区别。
-
@import在 CSS 文件里写，会等前一个文件下载+解析完才发起下一个请求，链式阻塞 - 多个
link标签由 HTML 解析器统一调度，并发发起，无依赖关系 - HTTP/2 下还能复用连接，进一步减少开销
link 标签顺序直接影响样式是否生效
样式不是“同时生效”，而是按 link 在 head 中出现的顺序逐个加载、解析、层叠。后引入的 CSS 中相同选择器（且权重相等）会覆盖前面的。
- 常见问题：
theme.css改了按钮颜色但没变 → 检查它是不是被后面引入的base.css覆盖了 - 调试技巧：在开发者工具的“Computed”面板看“Source”列，直接定位到生效的规则来自哪个文件
- 错误写法：
<link rel="stylesheet" href="theme.css">放在base.css前面，会导致主题色被基础样式重置
media 属性让部分 link 不参与屏幕渲染
加了 media 的 link 仍会发起请求（除非匹配条件为 false，如 print 在屏幕环境下），但只有匹配时才应用样式。这对响应式很实用，但也容易误判性能影响。
-
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">：小屏设备加载并应用；大屏设备也发请求，但不解析样式 - 真正想“完全不加载”，得用 JavaScript 动态插入，或配合
rel="preload"+onload注入 - 不要滥用
media="print"来“隐藏”调试样式——它仍可能触发 FOUC 或干扰构建工具的 CSS 提取
生产环境别真留一堆 link 标签
开发阶段用多个 link 是为了调试方便，但上线前必须合并压缩。否则每个 link 都是一次 HTTP 请求，即使 HTTP/2 有队头阻塞缓解，TCP 连接建立、TLS 握手、服务器响应延迟依然存在。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 等构建工具默认把
import './a.css'打包进一个style.css，再用单个link引入 - 如果必须保留多文件（如微前端子应用隔离样式），至少加版本哈希：
theme-dark.abc123.css，避免缓存失效问题 - 关键首屏 CSS 建议内联，非关键（如打印、动画、主题切换）用
media或动态加载
link 放在 body 里可能触发 FOUC，哪怕只有一条。 
