在VSC中如何使用HTML外部CSS？页面无变化求原因

• CSS文件路径错误
  这是最容易踩的坑。检查HTML中<link>标签的href属性是否和CSS文件的实际位置匹配：

  • 若HTML和CSS在同一目录，路径应为href="style.css"；
  • 若CSS在子目录（比如css文件夹），路径要写href="css/style.css"；
  • 若CSS在上级目录，用../style.css返回上一级。
    另外注意路径的大小写，部分服务器环境对大小写敏感，比如Style.css和style.css会被视为不同文件。

• link标签属性缺失或错误
  确保<link>标签包含rel="stylesheet"属性，这是浏览器识别样式表的关键。正确的标签格式应为：

  <link rel="stylesheet" href="your-style.css">
  

  缺失rel属性会导致浏览器无法识别该文件为样式表，自然不会加载生效。

• 浏览器缓存干扰
  浏览器会缓存已加载的CSS文件，即使你修改了文件，也可能显示旧内容。按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再查看效果。

• CSS语法或选择器错误
  检查CSS文件里的语法：比如括号是否闭合、属性名拼写是否正确（比如把background-color写成background-colour）、选择器是否和HTML元素的class/id匹配。例如HTML里是<div class="container">，CSS里却写成.containers { ... }，自然无法匹配生效。

• 文件扩展名错误
  确认CSS文件的实际扩展名是.css，而非被隐藏的.txt或其他后缀。Windows系统默认隐藏已知文件扩展名，可能导致你以为存的是style.css，实际是style.css.txt。可以在文件夹设置里开启「显示文件扩展名」，或在VSCode的文件列表里查看完整文件名。

• 样式优先级冲突
  内联样式（inline CSS）和内部样式（internal CSS）的优先级高于外部CSS。如果HTML元素写了style="color: red"，哪怕外部CSS设置color: blue，也会被内联样式覆盖。可以暂时移除内联/内部样式，测试外部CSS是否生效。

• Live Server插件问题
  如果你用VSCode的Live Server插件预览页面，可能存在服务器路径异常或插件未正确启动的情况。尝试关闭Live Server后重新开启，或者直接用浏览器打开本地HTML文件，排除插件问题。

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