多级子目录下的HTML如何正确关联根目录styles文件夹的CSS文件

对应目录结构的正确路径写法 #

先明确两边的位置关系：

• 待关联CSS的HTML文件位置：根目录/site-content/projects/tribute.html
• 目标CSS文件位置：根目录/styles/tribute.css

相对路径以当前HTML文件所在的目录为计算起点，每写一个../就向上返回一级父目录：

1. 从projects文件夹出发，1个../回到site-content文件夹
2. 第二个../回到项目根目录
3. 进入styles文件夹找到tribute.css即可

最终正确的link标签写法：

<link href="../../styles/tribute.css" rel="stylesheet">

之前写法的错误点 #

• styles../../../tribute.css：路径逻辑顺序错误，必须先向上返回至目标文件所在的父级目录，再向下进入子文件夹查找文件，不能先写子目录名再向上跳转
• ../../../styles/tribute.css：向上跳转层级过多，3个../会跳出项目根目录到上一级系统目录，自然找不到根目录下的styles文件夹
• 你测试的1-5个../组合里，只有搭配2个../的层级是刚好回到根目录的，其他要么跳少了没到根目录，要么跳多了出了项目文件夹

写对路径仍不生效的排查项 #

如果换成正确路径后还是加载失败，按以下顺序排查：

• 确认link标签放在HTML文件的<head>标签内部，不要写到<body>里或者HTML标签结构外
• 检查文件名、文件夹名的大小写匹配：比如实际文件夹名为Styles、文件名为Tribute.css，和代码里写的小写名称不匹配会导致加载失败
• 清空浏览器缓存硬刷新：Windows端按Ctrl+F5，Mac端按Cmd+Shift+R，避免之前错误路径的缓存干扰
• 按F12打开浏览器开发者工具，切换到Network面板刷新页面，找到tribute.css的请求记录，查看状态码和实际请求路径，就能快速判断路径跳转是否符合预期

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