最常见的原因是外部CSS文件未正确引入，包括路径错误、加载顺序不当、缓存问题或MIME类型不匹配，需检查link位置、href路径、Network响应及样式覆盖情况。
CSS样式不生效，但浏览器控制台没报错，最常见的原因之一就是外部CSS文件没被正确引入。用 方式引入时，路径错误、加载顺序、缓存或MIME类型问题都可能导致样式“看不见”。
检查link标签是否写在head中且位置合理
标签应放在 内，且最好在 （尤其是操作DOM的脚本）之前。如果CSS在JS之后引入，而JS立即修改了元素样式或类名，可能造成样式被覆盖或来不及应用。
- ✅ 正确示例：
我的页面
css">
- ❌ 错误做法：把
放在底部，或放在会动态改样式的后面
确认href路径准确，区分相对与绝对路径
路径写错是高频问题。浏览器不会报JS那样的语法错误，但会在Network面板里显示404（文件未找到）。
- 如果HTML和CSS在同一目录：用
href="style.css" - 如果CSS在
css/style.css：用href="css/style.css"（相对HTML文件位置） - 避免用
href="./css/style.css"这类冗余写法，除非有特殊需求；更别写成href="CSS/style.css"（大小写敏感，尤其在Linux服务器上） - 开发时可在浏览器开发者工具的 Network → Filter 输入 “css”，看该文件是否返回 200，还是 404 或 403
留意CSS加载是否被缓存或阻塞
改了CSS却没变化？很可能是浏览器缓存了旧版本。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新：Windows/Linux 按 Ctrl + F5，Mac 按 Cmd + Shift + R
- 开发阶段可在
中临时加版本号防缓存：
- 检查Network面板中该CSS响应头：
Content-Type必须是text/css；如果是text/plain，服务器配置有问题，需修正MIME类型
验证CSS规则是否被覆盖或选择器不匹配
即使文件成功加载，样式也可能“失效”——实际是被其他规则覆盖，或选择器根本没选中目标元素。
- 打开开发者工具（F12），选中目标元素，在Styles面板查看哪些样式被划掉（strikethrough），点开对应CSS文件链接，确认规则来源
- 检查选择器优先级：例如
#header .nav a比.nav-link优先级高；内联样式和!important也会压制外部CSS - 确认HTML元素确实存在，且class/id拼写一致（注意空格、连字符、大小写）
