VS Code Live Server用CSS Grid时背景色不显示，已发现样式表链接拼写错误

问题现象 #

在VS Code中使用Live Server扩展运行CSS Grid学习代码时，点击「Open with Live Server」后页面结构正常加载，但用于展示Grid效果的section元素背景色完全不显示。此前使用Flex布局时无异常，尝试过重启软件、重装Live Server扩展、替换为老师的演示代码均未解决，浏览器为Firefox，而老师同款代码可正常运行。

相关代码 #

HTML代码 #

<body>
  <main id="grid_container">
    <section class="red"></section>
    <section class="yellow"></section>
    <section class="blue"></section>
  </main>
</body>

CSS代码 #

.red{
    background: red;
}

.yellow{
    background: yellow;
}

.blue{
    background-color: blue;
}

#grid_container{
    display: grid;
    grid-template-columns: 10vw 60vw 30vw;
    grid-template-rows: 30vh;
}

问题根源 #

经排查，问题出在HTML文件中链接样式表的路径/文件名输入错误，导致CSS文件未被正确加载，Grid布局规则和背景色样式均无法生效。

解决方法 #

1. 检查HTML头部的<link>标签，确认href属性中的CSS文件路径、文件名（含大小写、后缀）与实际文件完全匹配，示例正确写法：

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

2. 保存修改后刷新Live Server页面，即可看到Grid布局和背景色正常显示。

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