当 HTML 页面被移入子目录（如 pages/）后，相对路径需向上回溯一级才能正确加载根目录的 style.css，使用 ../style.css 即可解决 GitHub Pages 上样式失效问题。
当 html 页面被移入子目录（如 `pages/`）后，相对路径需向上回溯一级才能正确加载根目录的 `style.css`，使用 `../style.css` 即可解决 github pages 上样式失效问题。
在静态网站部署中，路径解析规则至关重要——它不仅影响本地开发体验，更决定线上环境（如 GitHub Pages）能否正常渲染样式。你当前的项目结构如下：
TheWitchIsDead/
├── index.html ← 位于根目录
├── style.css ← 样式表位于根目录
└── pages/
├── about.html
├── contact.html
└── ... ← 所有子页面均在此目录
index.html 中使用 是正确的：因为同级引用，浏览器会从当前 URL（https://dacevedo11.github.io/TheWitchIsDead/）下查找 style.css。
但 pages/about.html 的实际访问路径是：
https://dacevedo11.github.io/TheWitchIsDead/pages/about.html
此时，若仍写 ，斜杠 / 表示站点根路径（即 https://dacevedo11.github.io/），而你的仓库托管在子路径 /TheWitchIsDead/ 下，因此该链接实际请求的是 https://dacevedo11.github.io/style.css —— 显然 404。
而 则会被解析为相对于当前 HTML 所在路径，即 https://dacevedo11.github.io/TheWitchIsDead/pages/style.css —— 该文件并不存在。
✅ 正确解法是使用相对路径 ../style.css：
- .. 表示上一级目录；
- pages/ 下的 HTML 向上一级即回到项目根目录，恰好能定位到 style.css。
因此，请统一将 pages/ 下所有 HTML 文件中的样式引用改为：
<link rel="stylesheet" href="../style.css">
✅ 验证建议：
- 本地 VS Code Live Server 可能因服务器配置宽松而“巧合”兼容 /style.css 或 style.css，但这不代表路径正确；
- GitHub Pages 严格遵循标准路径解析逻辑，务必以 ../ 显式声明层级关系；
- 若未来增加更多嵌套层级（如 pages/blog/post.html），则需相应调整为 ../../style.css。
? 进阶提示：为提升可维护性与部署灵活性，推荐采用根相对路径（Root-relative path）配合自定义基础 URL，或使用构建工具（如 Vite、Hugo）自动处理资源路径。但对于纯静态 GitHub Pages 项目，../style.css 是最简洁、可靠且无需额外依赖的解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
