必须写全rel="stylesheet"，否则浏览器忽略加载；cdn路径需协议匹配、版本完整；框架css须置于自定义css前；禁用media属性以免响应式失效。
link标签引入CSS框架时必须写全rel="stylesheet"
漏掉 rel="stylesheet" 是引入失败的头号原因，尤其在复制 Bootstrap、Tailwind 或 Ant Design 的 CDN 示例时，有人只粘贴了 href 部分。浏览器看到 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> 这种写法，会直接忽略——不发请求、不报错、DevTools 里也看不到加载痕迹。
正确写法只有这一种核心组合：<link rel="stylesheet" href="...">。其他 rel 值（比如 preload、prefetch）不会触发样式解析。
- CDN 引入务必核对官方文档给的完整标签，别手动删属性
- 本地引入时，如果用构建工具（Vite/Webpack），
href路径可能被重写，但rel仍需显式保留 - 某些 CMS 或低代码平台自动生成
<link>，要检查源码输出是否含rel
路径和协议问题在框架 CDN 场景下特别敏感
CSS 框架通常依赖完整路径加载字体、图标或额外资源（如 Bootstrap 的 bootstrap-icons、Tailwind 的 @layer 扩展）。若 href 协议不匹配或路径不全，这些子资源会 404。
常见错误现象：
- Tailwind 的
@apply生效但图标不显示 → 检查href是否用了http://而当前页是https:// - Bootstrap 表单控件样式缺失 → CDN URL 少了版本号，如写成
https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css（缺@5.3.3），导致返回 404 或旧版 CSS - 本地开发时双击打开 HTML，
file://协议下所有https://CDN 都被浏览器拦截 → 必须起本地服务器（如npx serve）
多个框架或自定义 CSS 共存时的加载顺序陷阱
浏览器按 <link> 在 中出现的**文本顺序**加载并解析 CSS。这意味着：
- 框架 CSS（如 Bootstrap）应放在自定义 CSS 之前，否则你的
.btn-primary可能被框架默认样式覆盖 - 不要把框架
<link>放在<script></script>后面——JS 执行可能早于 CSS 解析完成，造成 DOM 渲染时样式未就绪 - 避免混用
@import和<link>：例如在自定义style.css里用@import "https://cdn.tailwindcss.com"，会串行阻塞，且 Tailwind 官方明确不推荐这种方式
典型安全顺序：<title></title> → 框架 <link> → 第三方插件 CSS（如 DataTables）→ 项目自定义 <link> → <script></script>
media 属性误用会导致框架响应式失效
CSS 框架（尤其是 Bootstrap、Foundation）大量依赖媒体查询实现断点。如果给框架 <link> 加了错误的 media，整套响应式逻辑就废了。
例如：<link rel="stylesheet" href="bootstrap.min.css" media="screen and (min-width:768px)"> —— 这会让手机端完全不加载 Bootstrap，连栅格系统都失效。
- 除非你明确要做“仅打印样式”或“仅暗色模式”，否则框架 CSS 不要加
media - 真要条件加载，请用 JS 动态插入，或用
<link rel="stylesheet" media="print">配合window.matchMedia切换 - 检查 DevTools 的 Network 面板，确认框架 CSS 请求的
Response Headers里没有X-Content-Type-Options: nosniff导致 MIME 类型被拒（少见但存在）
最稳妥的做法：框架 CSS 用无 media 的 <link rel="stylesheet">，自定义逻辑通过 CSS 媒体查询或 JS 控制，别动框架入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
