最常见原因是link标签href路径错误导致404且无报错，如相对路径写错、开发服务器根目录理解偏差、构建后路径失效；其次为CSS加载顺序错误、rel属性拼写错误、media条件不匹配等静默失效问题。
link 标签 href 路径错误导致样式完全不生效
这是新手最常遇到的问题：浏览器控制台看不到报错，但页面就是没样式。根本原因是 的 href 指向了一个 404 路径，而开发者误以为“没报错=加载成功”。
- 相对路径写错，比如当前 HTML 在
/pages/index.html，却写了href="css/style.css"，实际 CSS 在/assets/css/style.css - 开发服务器根目录理解偏差：Vite 默认以
src/为源码根，但public/下资源是直接映射到/，href="/style.css"只能访问public/style.css - 构建后路径失效：Webpack/Vite 中未配置
publicPath或base，导致打包后href="css/app.123.css"解析成http://example.com/css/app.123.css（404），而非正确子路径
多个 link 标签顺序颠倒引发覆盖失效
CSS 加载顺序直接影响层叠规则。把重置样式（如 reset.css）放在业务样式后面，等于白加；把第三方 UI 库的 CSS 放在自定义主题之后，会导致主题变量被覆盖。
- 错误示例：
<link rel="stylesheet" href="main.css"><link rel="stylesheet" href="normalize.css">
→normalize.css里的body { margin: 0 }被main.css里旧版body { margin: 8px }覆盖 - Vue/React 单文件组件中
会注入到末尾，若同时存在外部，其优先级天然低于后注入的内联样式 - 使用
@import替代会阻塞渲染，且无法并行加载，还可能因语法位置（必须在@charset后、其他规则前）出错
rel 属性拼写错误或值不合法导致浏览器忽略加载
rel="stylesheet" 是唯一被广泛支持的样式加载声明方式。写成 rel="style"、rel="css" 或漏掉 rel，Chrome/Firefox 都会静默跳过该标签，不发请求也不报错。
- 常见手误：
rel="styleSheet"（大小写敏感，必须全小写） - 服务端模板中变量未渲染导致：
rel="{{ css_rel }}"渲染为空 →rel=""→ 无效 - 某些 CMS 或构建工具自动注入
，但没配as="style"和onload回调，结果只预加载不应用
媒体查询条件写错导致样式“看似加载却不起作用”
样式文件明明 200 加载成功，也出现在 里，但对应元素就是没效果——大概率是 media 属性限制了生效场景。
- 典型错误：
→ 页面始终在 screen 模式下，这份 CSS 永远不会应用 -
media="(max-width: 768px) and (orientation: landscape)"这种复合条件，漏括号或空格（如and(orientation）会导致整个 media 表达式解析失败，浏览器按media="all"处理？不，实际是降级为无效，等同于没加 media - 使用
prefers-color-scheme时未开启系统深色模式，或浏览器版本不支持（Safari 12.1+ 才支持media="(prefers-color-scheme: dark)"）
真正卡住人的，往往不是语法报错，而是浏览器安静地跳过某一步——比如 rel 拼错、media 写废、路径少个 ../。检查时别只盯控制台 Network 面板有没有 200，得点进去看响应体是不是真实 CSS 内容，再顺手查下 标签是否真的被浏览器识别为样式资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
