VS Code使用Live Server运行时CSS字体颜色样式不生效问题

按优先级从高到低排查以下问题即可解决：

• 缓存问题排查
  1. 先在Live Server打开的浏览器页面按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）执行硬刷新，绕过本地缓存重新拉取所有资源，90%的同类问题都是Live Server首次加载时缓存了旧的空CSS文件导致的。
  2. 如果硬刷新后偶尔复现，直接打开VS Code设置面板，搜索Live Server: No Browser Cache，勾选该配置项后重启Live Server，插件会自动给静态资源响应添加禁用缓存的头信息，不会再读取旧缓存。
• 路径解析问题排查
  Live Server是基于本地HTTP服务解析资源路径，和你直接Ctrl+F5打开本地文件的文件系统路径解析逻辑有区别：
  1. 不要在CSS的<link>标签里写本地磁盘绝对路径（比如D:/code/demo/style.css），这类路径在HTTP服务下无法被正常识别。
  2. 检查VS Code打开的工作区根目录是否是你的项目根目录：如果你打开的是项目外层的文件夹，Live Server的服务根目录会和你预期的不一致，写/css/style.css这类根路径写法时会找不到文件。统一用./开头的相对路径引入CSS最稳妥，例如<link rel="stylesheet" href="./css/style.css">。
  3. 验证方法：打开Live Server页面后按F12打开开发者工具，切到「网络」面板刷新页面，找到对应CSS文件的请求，如果状态码是404，直接看请求的资源地址，调整引入路径到能正常返回200状态码即可。
• 样式优先级问题排查
  如果CSS文件加载状态是200，按F12切到「元素」面板，选中字体颜色异常的DOM节点，看右侧样式面板里你写的color规则是否被划掉：如果被划掉说明存在更高优先级的样式（行内样式、带!important的其他规则、权重更高的选择器）覆盖了你的字体颜色设置，调整对应选择器权重即可。

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