/pages/目录下页面无法链接CSS文件的技术求助

先理清楚你的文件结构，确保我们在同一个频道上：

根目录/
├─ index.html
├─ css/
│  └─ css.css
├─ pages/
│  └─ bulletin.html
└─ images/
   └─ image.jpg

从逻辑上来说，bulletin.html里写的../css/css.css路径是完全正确的——../会让你从pages/目录回到根目录，再进入css/文件夹找到css.css。既然图片路径../images/image.jpg能正常工作，那CSS加载失败肯定是某个细节出了问题，按下面的顺序排查：

• 大小写不匹配（最常见！）
  如果你的网站部署在Linux或macOS服务器上，文件名是严格区分大小写的。比如实际CSS文件夹叫CSS/而不是你写的css/，或者文件名是Css.css，那服务器就找不到这个文件。而图片路径刚好大小写完全匹配，所以能正常显示——这种坑真的很容易踩，一定要仔细核对服务器里的实际文件名。

• 手滑的拼写错误
  有没有可能把css写成了cs或者csss？或者文件名是style.css而不是css.css？有时候多打一个字母或少打一个，肉眼真的很难发现。直接去服务器的css/文件夹里看看，确认文件名和你写的路径完全一致。

• 浏览器缓存搞鬼
  有时候浏览器会缓存之前加载失败的状态，哪怕你已经修正了路径，它还是会显示加载失败。试试这两个办法：

  • 按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面
  • 打开浏览器开发者工具（按F12），在「网络」面板里勾选「禁用缓存」，再重新加载页面

• <base>标签搞乱了路径基准
  检查一下bulletin.html的头部有没有设置<base href="xxx">标签。这个标签会改变所有相对路径的参考基准：比如如果<base href="/pages/">，那../css/css.css逻辑上还是对的，但如果<base href="https://example.com/other-folder/">，那路径就完全错了。如果有这个标签，要么删掉它，要么调整CSS路径来适配base的设置。

• 服务器权限限制（可能性较低）
  虽然index.html能正常加载CSS，但少数情况下服务器的配置（比如.htaccess规则）可能限制了pages/目录下的文件访问上级目录的资源。你可以直接在浏览器地址栏输入你的域名加上/css/css.css，看看能不能正常打开这个CSS文件——如果能打开，那权限问题就可以排除了。

按这个顺序排查，应该很快就能找到问题啦！

内容的提问来源于stack exchange，提问作者Emilie B