最常见的原因是link标签href路径与实际文件位置不匹配，浏览器network面板显示404错误；相对路径以html所在目录为基准，大小写敏感，需确保rel="stylesheet"且置于head内，同时排查缓存、样式覆盖及js干扰。
CSS 文件路径写错导致样式不生效
最常见的原因是 link 标签里的 href 路径与实际文件位置不匹配。浏览器控制台（F12 → Network）中会显示 404 错误，状态码旁标着 Failed to load resource。
- 相对路径要以 HTML 文件所在目录为基准，不是以 CSS 文件或项目根目录为准
-
./style.css表示同级目录；../css/style.css表示上一级的css文件夹下 - 路径中大小写敏感（尤其在 Linux 服务器或 Docker 环境中），
Style.css≠style.css - 避免用绝对路径如
C:/project/style.css—— 浏览器不识别本地磁盘路径
HTML 中 link 标签未正确加载或位置错误
link 标签必须放在 内，且不能被注释、拼写错误或遗漏 rel="stylesheet" —— 缺少这个属性，浏览器不会当作样式表解析。
- 检查是否误写成
<link href="style.css">（缺少rel和type） - 确认没有被其他同名标签覆盖，比如多个
link指向不同 CSS，后加载的会覆盖前面的规则（层叠顺序） - 若使用构建工具（Vite/Webpack），确保路径是输出后的真实路径，而非源码路径（例如
src/下的路径在 dist 中已扁平化）
浏览器缓存导致修改后的 CSS 看不到效果
即使路径和语法都对，浏览器可能仍在用旧缓存版本。典型表现是：改了 CSS 但页面毫无变化，甚至硬刷新（Ctrl+R）也无效。
- 强制刷新：Windows/Linux 用
Ctrl+Shift+R，macOS 用Cmd+Shift+R - 开发者工具中勾选
Disable cache（Network 面板右上角齿轮图标） - 上线环境可在
link后加版本参数，如href="style.css?v=1.0.2"或用构建时哈希（style.a1b2c3.css） - 本地开发时，某些编辑器（如 VS Code Live Server）默认启用缓存，可右键重启服务或换用
npx serve
样式被覆盖或选择器权重不足
路径、加载、缓存都没问题，但样式仍不生效？打开开发者工具（Elements → Styles），看目标元素右侧的 CSS 规则是否被划掉（strikethrough）—— 被划掉说明该规则被更高优先级的样式覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有更具体的选择器（如
#header .nav li a比a权重高） - 注意
!important的滥用会干扰调试，临时加它只是验证手段，不是解法 - 内联样式（
style="color: red;"）优先级高于外部 CSS，也会导致外部规则失效 - 确认没在 JS 中动态移除了 class、清空了
style属性，或通过document.styleSheets禁用了某张表
href。 
