外链css没生效主因是link标签未被浏览器识别为样式表：先查network面板是否发出请求且状态码为200，重点排查href路径基准错误、rel="stylesheet"缺失或拼错、文件大小写不一致、media不匹配、content-type非text/css及缓存问题。
外链 CSS 没生效，八成不是 CSS 写错了，而是 link 标签根本没被浏览器当样式表处理——先盯死它有没有发请求、有没有加载成功，再谈样式写得对不对。
Network 面板里找不到 CSS 文件或状态码是 404
这说明浏览器压根没拿到文件，所有后续排查都白搭。重点检查：
• href 路径是否以 HTML 所在位置为基准：比如 /pages/user.html 里写 href="css/style.css"，实际会去找 /pages/css/style.css，而不是项目根目录下的 /css/style.css
• 是否误用了 Windows 风格反斜杠：href="css\style.css" 在绝大多数浏览器中无效，必须用正斜杠 /
• 文件名大小写是否一致：Linux 服务器上 Style.css 和 style.css 是两个文件
• 右键点击 href 值，在新标签页打开，看能否直接看到纯 CSS 文本（不是 404 页面，也不是下载提示）
• 本地双击 HTML（file:// 协议）时，跨目录访问常被浏览器拦截，状态码可能显示为 0；务必用本地服务器（如 VS Code Live Server）测试
link 标签写了但浏览器不解析 CSS
常见于属性缺失或错写，导致浏览器忽略该标签：
• 必须有 rel="stylesheet" —— 缺失、拼错（如 rel="style"）、多词（如 rel="stylesheet css"）都会失效
• link 必须放在 内；放在 底部或 JS 动态插入后，部分浏览器延迟解析甚至不解析
• 检查是否误加了 disabled 属性：<link disabled rel="stylesheet" href="style.css"> 会直接禁用
• 不要给 link 加 async 或 defer —— 这俩对 CSS 无效，还可能干扰加载顺序
CSS 文件返回了 200 但样式还是没效果
此时文件已加载，问题转向“规则是否起作用”：
• 打开开发者工具，选中目标元素，在 Styles 面板里找你的规则：如果整条没出现，说明选择器完全没匹配上（比如写成 .Header 但 HTML 是 class="header"）
• 如果规则出现了但被划掉（strikethrough），点开看是谁覆盖了它——常见于框架 CSS、重置样式表或内联样式优先级更高
• 检查 media 属性：media="print" 或 media="(max-width: 768px)" 在常规浏览下不会生效，临时改成 media="all" 测试
• 查看响应头：Content-Type 必须是 text/css；若为 text/plain 或 application/octet-stream，浏览器会拒绝解析（Nginx/Apache 需配置 MIME 类型映射）
改了 CSS 却看不到变化，控制台也没报错
大概率是缓存或构建产物不一致：
• 强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R），同时勾选 DevTools Network 面板的 Disable cache
• 构建工具（Vite/Next.js）中，public/ 下的 CSS 用绝对路径引用，src/ 中的应通过 import './style.css'，而非 link —— 否则打包后可能未包含或哈希名不匹配
• 临时加版本参数破缓存：href="style.css?v=1.0.1"，每次修改后手动更新值
• 注意：某些编辑器的实时预览（如 VS Code 的 Open with Live Server）可能缓存旧资源，重启服务再试
真正卡住人的往往不是复杂逻辑，而是 rel="stylesheet" 少了个引号、路径里多了一个点、服务器没配对 MIME 类型——这些地方一错，整个样式表就静默消失，连控制台都不会提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
