HTML中link标签href路径错误是CSS失效的最常见原因，需确保href值与CSS文件实际位置匹配，区分大小写，避免绝对路径，并确认Live Server根目录和rel="stylesheet"拼写正确。
HTML 中 link 标签的 href 路径写错是最常见原因
VS Code 里 HTML 引入 CSS 失效，八成是路径不对——不是文件没保存，也不是 VS Code 设置问题，就是浏览器找不到那个 .css 文件。
关键看 link 的 href 值是否和实际文件位置匹配。VS Code 不会自动校验路径，它只管高亮语法，不负责运行时加载。
- 如果 CSS 文件和 HTML 在同一目录，用相对路径：
- 如果 CSS 在
css/子目录，必须写全： - 别用绝对路径如
/css/style.css（除非你配了本地服务器且根目录明确），浏览器会从http://localhost/css/style.css找，大概率 404 - 路径区分大小写，
Style.css和style.css在 Linux 或 VS Code Live Server 下不是同一个文件
VS Code 的 Live Server 插件对路径解析有默认规则
很多人装了 Live Server 后发现路径突然“变怪了”，其实是它把项目根目录当作 Web 根目录来服务，而不是当前 HTML 所在目录。
比如你在 project/pages/index.html 里写 href="../css/main.css"，Live Server 会从 project/ 开始解析，但如果你直接双击 HTML 打开，浏览器是从 pages/ 目录开始找上级，结果完全不同。
- 统一做法：所有
href都以项目根为基准，用相对路径（不加/开头） - 确认 Live Server 启动的是哪个文件夹——右键文件夹 → “Open with Live Server”，不是右键单个 HTML
- 按
Ctrl+Shift+P输入 “Live Server: Show Log”，能看到实际服务的根路径和请求 404 记录 - 临时验证路径是否有效：把
href值复制进浏览器地址栏（补上前缀如http://127.0.0.1:5500/css/style.css），看能否直接下载到 CSS 内容
rel="stylesheet" 拼错或漏写会导致样式完全不加载
这个属性不是可选的，浏览器靠它识别这是样式表资源。漏掉、拼成 rel="styleSheet" 或 rel="css"，标签就变成普通外部链接，CSS 不会解析。
- 必须小写、全拼、无空格：
rel="stylesheet" - 别和
<script></script>混淆，不需要type="text/css"（HTML5 已废弃该属性） - 检查控制台是否有类似
Failed to load resource: net::ERR_ABORTED的报错，点开链接看是不是 404 或 MIME 类型错误（比如返回了 text/html） - 如果 CSS 文件本身有语法错误（如漏大括号、非法字符），浏览器通常仍会加载，但部分规则失效——这时要查开发者工具的 “Styles” 面板里有没有该文件名，有没有被划掉的声明
VS Code 编辑器本身不参与 CSS 加载，但文件编码和换行符会影响读取
极少数情况，CSS 文件保存为 UTF-8 with BOM 或使用 CRLF 换行符，在某些旧版浏览器或嵌入式环境里可能触发解析异常，表现为样式空白或乱码。
- 在 VS Code 右下角查看当前编码，点击切换为
UTF-8（不含 BOM） - 换行符统一设为
LF（Unix 风格），避免 Windows 默认的CRLF在某些构建流程中引发问题 - 保存后刷新页面，如果之前样式全无，现在突然出现，大概率是编码问题
- 不用刻意加
来“修复”，HTML 文件编码和 CSS 文件编码是独立的，CSS 文件头部不支持 meta 标签
路径和协议细节最容易被跳过，但恰恰是打开开发者工具后第一眼该盯住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
