VS Code引入外部CSS后预览提示内容禁用且Live Server无样式生效怎么办？

• 确认CSS文件的基础属性
  检查CSS文件扩展名是否为.css，不是.txt或其他错误后缀；打开文件后查看VS Code右下角是否显示CSS类型，若不是，点击该区域选择CSS关联格式。

• 验证HTML中link标签的正确性
  确保link标签写法无错误，示例：

  <link rel="stylesheet" href="styles.css">
  

  重点核对rel="stylesheet"不能拼写错误；href路径直接右键复制CSS文件相对当前HTML的路径粘贴，避免手动输入出错（比如CSS在子文件夹css内就写href="css/styles.css"，上级目录则写href="../styles.css"）。

• 处理VS Code内置预览的安全限制
  预览时出现的Some content has been disabled in this document是内置预览的安全拦截机制，直接以Live Server作为调试工具即可，无需纠结该预览模式。

• 排查Live Server的启动与资源请求
  必须右键点击目标HTML文件选择Open with Live Server启动，避免直接启动导致根目录不符；打开浏览器开发者工具（F12）切换到Network标签，刷新页面查看CSS文件的请求状态：

  • 若显示404：说明路径仍有问题，重新核对href；
  • 若显示200：点击请求查看响应内容是否为你的CSS代码，若为空或错误，检查CSS文件本身是否损坏。

• 检查CSS语法错误
  查看CSS文件内是否有VS Code标出的红色波浪线，比如遗漏分号、括号不匹配、选择器拼写错误等，这类小问题会导致整个CSS文件失效。

• 强制刷新清除缓存
  在Live Server的浏览器页面按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新，或在开发者工具中勾选禁用缓存后再刷新，避免旧缓存干扰。

• 排查样式优先级问题
  若CSS代码正确但不生效，可临时在属性后加!important测试（仅用于排查，不推荐长期使用），比如：

  body {
    background-color: blue !important;
  }
  

  若生效则说明存在更高优先级的样式（如内联样式、ID选择器），调整自身选择器优先级即可。

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