多个标签按需顺序写在中是唯一正确、稳定、可预测的css加载方式，必须置于和之后、之前，按顺序依次请求解析，后加载的css规则覆盖前者，禁用@import。
直接用多个 <link> 标签按需顺序写在 里，就是唯一正确、稳定、可预测的方式——别绕弯，也别用 @import。
多个 <link> 必须全部放在
浏览器只在解析 阶段预加载 CSS。一旦把某个 <link rel="stylesheet" href="..."> 放到 里，就会触发 FOUC（无样式内容闪现）：文字先裸奔渲染，等 CSS 加载完才突然套上样式。
-
<link>要排在<meta>和<title></title>之后、<script></script>之前，避免阻塞 JS 执行 - 路径写错时控制台报
Failed to load resource: the server responded with a status of 404 ()，但页面不提示，容易漏查 - 不要加
type="text/css"——现代浏览器默认识别rel="stylesheet"，加了冗余还可能干扰某些构建工具
顺序决定层叠覆盖逻辑，不是“谁快谁赢”
多个 <link> 是按 HTML 中出现顺序依次请求并解析的，后加载的 CSS 文件中相同选择器的规则会覆盖前面的——这不是加载完成时间决定的，而是 DOM 解析顺序决定的。
- 典型顺序：
reset.css→base.css→components.css→theme.css - 比如
reset.css设h1 { margin: 0; }，theme.css后设h1 { margin: 2rem; }，最终生效的是后者 - 如果改了
theme.css却没生效？打开开发者工具的 “Computed” 面板，点击属性值旁的文件名链接，能跳转到实际声明位置，确认它是否真在最后
别用 @import 替代 <link>
@import 是 CSS 规则，不是 HTML 标签。你不能在 里写 <style>@import "a.css";</style>——它必须是 <style></style> 块内的第一条语句，且不能和任何其他规则（包括注释）并存，否则整个 @import 被忽略。
- 多个
@import在 CSS 文件内是串行加载，而<link>可并行下载，性能差一截 - IE6–8 对
@import支持不稳定，哪怕已淘汰，遗留项目仍可能踩坑 - 构建工具（如 Vite）里写
import './theme.css';是安全的，因为打包阶段已转为<link>顺序；但纯 HTML 中禁用@import
路径、HTTP 请求数、特异性才是真坑
顺序对了 ≠ 样式一定生效。三个高频盲区：
- 相对路径以当前 HTML 文件为基准：
css/main.css和../css/main.css容易写反；建议统一用根路径（/css/main.css）或交由构建工具处理 - 每个
<link>发起一次 HTTP 请求，十几个文件会拖慢首屏；上线前应合并压缩，开发期可用media="print"或disabled临时关掉非关键 CSS - 特异性（specificity）干扰常被忽略：比如
.btn { color: red; }被button.btn { color: blue; }覆盖，不是顺序问题，是选择器权重更高——这时看 “Computed” 面板比盯<link>顺序更管用
最常被忽略的其实是路径基准和特异性叠加效应——顺序只是表象，真正生效的永远是浏览器计算出的最终规则，而不是你写的第几个 <link>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
