HTML位于子文件夹时CSS文件链接失效如何解决

问题核心原因 #

相对路径的解析基准是当前HTML文件自身的存放位置，不是项目根目录，路径层级写错时浏览器会向不存在的位置发起CSS文件请求，自然无法加载生效。

对应目录结构参考 #

你当前的目录结构符合以下通用形态：

项目父目录/
├─ css/ （样式文件存放文件夹）
│  └─ 目标样式文件.css
└─ html子文件夹/ （单独存放HTML文件的目录）
   └─ 待加载样式的页面.html

常见错误写法 #

以下写法都会导致CSS加载失败：

• 在子文件夹的HTML中直接写href="css/目标样式文件.css"：浏览器会默认去html子文件夹/css/路径下找文件，该路径实际不存在
• 路径中上级目录符号../的数量写错，多写、少写都会指向错误位置
• 路径中文件夹、文件名大小写不匹配，在大小写敏感的系统/服务器环境下，CSS和css、Style.css和style.css会被识别为完全不同的路径

正确写法 #

1. 相对路径写法（本地直接打开HTML也能生效，通用性最强） #

子文件夹内的HTML需要先回到上一级父目录，才能找到同级的css文件夹，../就代表当前文件所在目录的上一级，正确的链接标签写法：

<link rel="stylesheet" href="../css/目标样式文件.css">

如果你的HTML嵌套了更多层子目录，每多嵌套一层就多添加一个../，例如HTML存放在html子文件夹/二级子目录/下时，路径要写为../../css/目标样式文件.css

2. 根路径写法（适合Web服务器部署场景） #

如果项目是运行在Web服务器上的站点，可以直接以站点根目录为基准写路径，路径开头加/即可，不受HTML存放层级影响：

<link rel="stylesheet" href="/css/目标样式文件.css">

注意：该写法用file协议本地直接打开HTML时会失效，仅适用于服务器环境

快速排查技巧 #

打开浏览器按F12调出开发者工具，切换到「网络」面板后刷新页面，找到CSS文件的请求记录，查看浏览器实际请求的完整路径，和本地真实的文件存放路径做对比，就能快速定位是哪一层级的路径写错了。

内容的提问来源于stack exchange，提问作者Saul Kriheli