link标签href路径未生效，首要检查相对路径是否错误，因浏览器按HTML文件位置解析路径；其次确认大小写匹配、media属性误配、CSS优先级冲突等问题。
link 标签 href 路径没生效，先查是不是相对路径写错了
浏览器加载 <link rel="stylesheet" href="..."> 时，路径是相对于当前 HTML 文件所在位置解析的，不是相对于 CSS 文件、也不是相对于服务器根目录。很多人在子目录放 HTML，却用 href="css/style.css"，结果浏览器实际请求的是 /subdir/css/style.css，而文件其实在 /css/style.css。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具（F12），切到 Network 标签页，刷新页面，找那个 CSS 请求——看 Status 是 404 还是 200，点击它，看 “Headers” 里的 “Request URL”，确认浏览器到底想从哪儿加载
- 路径尽量用绝对路径：以
/开头，比如href="/css/style.css"，这样始终从域名根开始算 - 如果项目部署在子路径（如
https://example.com/myapp/），不能硬写/css/，得配合构建工具或后端注入基础路径，否则线上会 404
CSS 文件明明存在，但样式不生效，检查文件名大小写是否匹配
开发时在 macOS 或 Windows 上可能不报错，因为本地文件系统默认不区分大小写；但一上 Linux 服务器（绝大多数生产环境），style.CSS 和 style.css 就是两个文件。href="style.CSS" 会直接 404，且控制台只显示“Failed to load resource”，容易被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用小写字母命名 CSS 文件：
main.css、reset.css，并在<link>中严格保持一致 - 检查服务器返回的响应状态码——如果是 404，再点开看响应头里的
Content-Type：如果是text/html，大概率是 Nginx/Apache 返回了错误页，而不是真实 CSS 文件 - 用 curl 快速验证：
curl -I https://yoursite.com/css/style.css，看返回的 HTTP 状态码和Content-Type
link 加载了但样式没应用，确认 media 属性是否误配
<link> 支持 media 属性，比如 media="print" 或 media="(max-width: 768px)"。如果写了但条件不满足，CSS 就不会被应用，也不会报错，非常隐蔽。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 临时删掉
media属性，看样式是否立刻生效；确认后再加回来并调试媒体查询 - 注意
media="screen"是默认值，显式写出来没必要；但media="all"才真正覆盖所有设备类型（包括 print） - 响应式开发中，避免在多个
<link>中用冲突的媒体查询，比如一个写(min-width: 769px)，另一个写(max-width: 768px)，中间可能有 1px 缺口
Chrome 显示 CSS 已加载，但元素没渲染对应样式，优先看 CSS 优先级和 !important 冲突
这不是路径问题，但常被误判为“样式没加载”。浏览器 Network 里看到 CSS 返回 200，Elements 面板里也能看到规则，但 computed 样式没体现——大概率是其他 CSS 规则权重更高，或者用了 !important 覆盖了它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板选中目标元素，右侧 Styles 标签里，逐条看哪些声明被划掉（strikethrough），鼠标悬停会提示“specificity”和“overridden by”
- 避免在多个地方滥用
!important；如果必须用，确保它出现在最终生效的那条规则里，而不是被另一条带!important的规则压住 - 检查是否引入了重置库（如 Normalize.css）或 UI 框架（如 Bootstrap），它们的默认规则可能比你的更具体（比如
button:focusvs.my-btn:focus）
