VS Code Live Server可加载CSS，直接打开HTML则无法加载求助

核心问题出在绝对路径的使用场景差异：

• 用Live Server时，它会启动本地服务器，此时路径里的/代表项目文件夹的根目录，所以/styles/style.css能正确指向项目内的CSS文件。
• 直接用浏览器打开本地index.html时，使用的是file://协议，这时/代表电脑系统根目录（比如Windows的C:\、macOS的/），浏览器会去系统根目录找styles文件夹，自然找不到你项目里的文件。

解决办法 #

把CSS的引用路径改成相对路径：
如果你的index.html在项目根目录，styles文件夹也在根目录，将代码修改为：

<link rel="stylesheet" type="text/css" href="./styles/style.css">

或者更简洁的写法：

<link rel="stylesheet" type="text/css" href="styles/style.css">

验证方式 #

直接打开HTML后按F12打开浏览器控制台，切换到「网络」标签，刷新页面就能看到CSS文件的请求状态为404，点击查看请求路径，会发现它指向系统根目录，这也能印证上述结论。

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