Atom编辑器编写HTML时关联的CSS样式表无法生效如何解决

样式表不生效的排查解决步骤 #

• 首先修正路径写法
  你当前使用的<link rel="stylesheet" href="/css/style.css">是站点根目录绝对路径，仅当你通过本地web服务（比如XAMPP、编辑器的实时预览插件等）启动项目时才能正常识别。如果你是直接双击打开HTML文件（浏览器地址栏为file:///开头），该路径无法定位到CSS文件，自然不会生效。
  如果是本地直接打开文件预览的场景，改成相对路径即可：
  • 若你的HTML文件和css文件夹处于同一级目录，修改为<link rel="stylesheet" href="./css/style.css">
  • 若HTML文件放在css文件夹上级目录的子文件夹里，根据层级调整，比如HTML在page文件夹下，就改成<link rel="stylesheet" href="../css/style.css">
• 核对文件目录结构
  确认你的项目文件结构完全匹配路径写法：项目目录下存在命名完全一致的css文件夹，文件夹内存在命名完全一致的style.css文件，注意大小写严格对应，比如CSS、Style.css这类写法都会导致匹配失败。
• 确认link标签位置
  link标签必须放在HTML文件的<head>标签内部，放置在<body>标签内或者HTML标签外都无法正常加载样式表。
• 排查CSS语法问题
  可以先在style.css内写最简测试样式验证，比如：

body {
  background: red !important;
}

如果生效说明路径没问题，是你之前写的CSS存在语法错误。

• 检查文件保存状态
  手动保存HTML和CSS文件（快捷键Ctrl+S/Cmd+S），避免Atom编辑器没有自动保存修改内容导致预览的还是旧版本。
• 清除浏览器缓存
  按下Ctrl+F5/Cmd+Shift+R强制刷新页面，避免浏览器加载了缓存的旧样式表。

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