link标签顺序决定同权重CSS覆盖结果，浏览器按HTML中从上到下解析，后加载的规则无条件覆盖前者；需确保rel正确、路径唯一、置于<head>内，并验证最终HTML输出。
link 标签本身不会“冲突”，但加载顺序、rel 值错误、重复注入或路径失效，会导致样式不生效、图标模糊、预加载失败等实际问题——处理的关键不是“解决冲突”，而是控制加载意图和验证最终输出。
为什么多个 link 标签会“看起来冲突”
浏览器按 link 在 HTML 源码中从上到下的顺序依次解析，但以下情况会让结果偏离预期：
-
rel值写错（如rel="styleSheet"或漏引号）→ 浏览器静默忽略，样式完全不加载 - 多个
rel="canonical"同时存在 → Google 可能整条忽略，而非取第一个 - 同一 CSS 文件被两个不同
href路径引入（如css/style.css和./css/style.css）→ Network 面板里出现两次 200 请求，但后一次覆盖前一次，且浪费带宽 -
link放在<body>里 → IE6–8 直接无视；现代浏览器虽能加载，但可能触发 FOUC，SSR 框架还会 hydration 失败
怎么确认 link 是否真的按预期工作
别信编辑器里的代码顺序，看最终 HTML 源码和 DevTools 行为：
- 右键 → “查看网页源代码”，搜索
rel="stylesheet"或rel="canonical"，确认位置在<head>内、唯一、闭合、路径是绝对 URL - 打开 DevTools → Network → 筛选
css，观察每个文件的Status和Initiator列：若某 CSS 显示两次请求，点进去看 Initiator 是哪行 HTML 或哪个 JS 脚本触发的 - Elements 面板选中元素 → Styles 面板右侧列出样式来源，灰色划掉的规则 = 被后续同权重规则覆盖，说明顺序或选择器权重有问题
动态生成页面时 link 容易踩的坑
Next.js、Nuxt、Vue SFC 或 PHP 模板中，link 很容易被框架或插件重复注入、路径拼错、或塞进错误上下文：
立即学习“前端免费学习笔记（深入）”；
- SEO 插件 + 主题模板各写一个
<link rel="canonical">→ 页面出现两个，信号矛盾 - Nuxt 3 用
route.fullPath构造 canonical href → 带?utm_source=xxx这类干扰参数，应改用route.path - PHP 中拼 URL 用
$_SERVER['REQUEST_URI']直接拼接 → 包含查询参数，应先用parse_url(..., PHP_URL_PATH)提取干净路径 - JS 动态插入：
document.head.appendChild(linkEl)→ 搜索引擎不执行 JS，canonical 无效；React/Vue 的useEffect或mounted里插入也一样
最常被忽略的一点：你写的 link 顺序，在构建工具（Vite/Webpack）介入后，很可能被 chunk 分割策略重排。最终 HTML 里 reset.css 出现在 theme.css 后面，不是你代码写错了，而是打包配置没锁住基础样式 chunk 的注入时机。
