VS Code中CSS样式无法生效 路径正确同文件夹也失效如何解决

• link标签属性配置错误
  这是该场景下最高发的问题，哪怕路径正确，只要link标签漏写rel="stylesheet"属性，或者属性值拼写错误，浏览器就不会把对应文件识别为样式文件。正确写法参考：

  <link rel="stylesheet" href="你的样式文件名.css">
  

• 浏览器缓存导致加载旧版本资源
  浏览器默认会缓存CSS等静态资源，就算你本地改了文件保存，浏览器可能还是用之前存的旧版本。可以按Ctrl+F5强制刷新页面，或者打开F12开发者工具，在「网络」标签页勾选「禁用缓存」后再刷新页面测试。
• CSS语法或选择器匹配错误
  如果CSS代码有语法问题，比如漏写大括号、分号，属性名、属性值拼写错误，或者选择器和HTML里的元素不匹配（比如类选择器忘了加.、ID选择器忘了加#、类名字母大小写和HTML里不一致），都会导致样式不生效。你可以打开F12的「元素」面板，点选对应要加样式的元素，看你写的样式有没有出现在样式列表里，是不是被标记成无效。
• 本地文件协议加载限制
  如果你是直接双击打开本地HTML文件，浏览器用file://协议加载页面，部分情况下会限制CSS资源加载。可以装VS Code的Live Server插件，右键HTML文件选「Open with Live Server」，用本地服务的方式打开页面测试。
• 样式优先级被覆盖
  如果你写的样式优先级比其他样式低，比如被行内样式、优先级更高的选择器覆盖，也会看起来像没生效。同样可以在「元素」面板的样式列表里看你的样式是不是被划掉了，如果是就是被更高优先级的样式覆盖了。

对应场景截图：
问题初始截图：

编辑保存后状态截图：

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