<link>必须是<head>的直接子元素，嵌套在<script>或<meta>内会被浏览器忽略；顺序决定CSS层叠优先级，后加载的同权重规则必定覆盖前者；<link>应置于<title>后、<script>前，且rel="stylesheet"不可省略或拼错。
link标签必须是的直接子元素，不能嵌套在其他标签内
浏览器只在解析 <head> 顶层节点时识别 <link> 的资源引入意图。如果把它包在 <script>、<meta> 或自定义 <template> 里，标签会被忽略——不发请求、不报错、Elements 面板可见但 Styles 面板为空。
常见错误写法：
<head>
<script>
<link rel="stylesheet" href="main.css"> <!-- ❌ 完全无效 -->
</script>
<meta name="viewport">
<link rel="stylesheet" href="base.css"> <!-- ❌ 同样无效 -->
</meta>
</head>正确写法就是平铺直叙：
<head> <meta charset="utf-8"> <title>My Page</title> <link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/theme.css"> <script src="/js/main.js" defer></script> </head>
link顺序决定CSS层叠优先级，不是加载快慢问题
<link> 的顺序直接影响最终样式生效逻辑：后出现的文件，在相同选择器权重下，规则会覆盖前面的。这不是“谁先加载完谁赢”，而是 CSS 层叠（cascading）的硬性规则。
立即学习“前端免费学习笔记（深入）”；
- reset.css → 清除默认 margin/padding，设基础字体/颜色
- base.css → 定义通用组件（
button、input、table等）的默认行为 - components.css → 按模块拆分的业务组件样式（如
.card、.navbar） - theme.css → 覆盖色值、间距变量、媒体查询等主题定制
如果把 theme.css 放最前，它里面写的 h1 { color: #333; } 可能被后面 base.css 里的 h1 { color: inherit; } 覆盖掉——哪怕 theme 文件体积更大、加载更慢。
link和script的相对位置影响渲染阻塞与执行时机
<link rel="stylesheet"> 会阻塞后续 HTML 解析（直到 CSSOM 构建完成），而 <script> 默认也会阻塞解析；二者放错顺序会导致白屏延长或 JS 执行异常。
推荐顺序（从上到下）：
-
<meta charset>和<title>（必须最前，保障基础解析） -
<link rel="stylesheet">（尽早声明样式，避免 FOUC） -
<script src="..." defer>或<script type="module">（用defer或type="module"让 JS 不阻塞渲染，且保证在 DOM 解析完成后执行） - 避免把
<script>放在<link>前面——否则 JS 可能读到未就绪的 CSSOM，getComputedStyle返回空值
特别注意：<script> 不加 defer 或 async 时，若放在 <link> 后，会等 CSS 加载完才执行；放在 <link> 前，则可能在样式加载前就运行，造成布局测量错误。
preload 和 prefetch 的 link 标签也要严格放在 head 里
像 <link rel="preload" as="style" href="critical.css"> 这类预加载指令，同样只能出现在 <head> 中，且建议放在所有 <link rel="stylesheet"> 之前。
原因很实际：
-
preload必须在浏览器开始解析 body 前被识别，才能提前发起请求 - 如果
as="style"却没配对rel="stylesheet"的同路径引用，浏览器不会应用该资源 -
prefetch（用于后续页面）可以稍后，但仍需在<head>内，否则被忽略
错误示例：<body><link rel="preload" as="style" href="late.css"></body> —— 这个请求会发出去，但不会参与当前页面样式构建，等于白忙。
