Atom中CSS代码失效求助：link标签引用外部样式表问题排查

• 核对目录结构与路径匹配度
  你写的href="css/styles.css"要求项目结构必须是主HTML文件和css文件夹平级，比如：

  项目文件夹/
  ├── index.html（你的主页面）
  └── css/
      └── styles.css
  

  如果主页面在子文件夹里，就得调整路径，比如主页面在pages文件夹下，路径要改成../css/styles.css。

• 强制刷新清除浏览器缓存
  浏览器经常会缓存旧的CSS文件，导致新样式不生效。按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，跳过缓存加载最新的文件。

• 用浏览器开发者工具排查加载状态
  按F12打开开发者工具，切换到网络标签，刷新页面后看styles.css的加载状态：

  • 如果显示404，说明路径还是错了，重新核对文件夹层级；
  • 如果加载成功，切换到元素标签，查看body或hr元素的样式面板，看外部样式有没有被加载进来，有没有被其他样式覆盖（不过你内嵌样式有效，大概率是外部样式没加载到）。

• 排查Atom预览插件的路径解析问题
  如果你用Atom的预览插件看页面，有些插件对相对路径的解析有bug。直接用本地浏览器打开HTML文件，测试样式是否生效，排除编辑器预览的问题。

• 补充link标签的type属性（可选）
  虽然HTML5里type="text/css"是可选的，但有些旧环境可能需要这个属性才能正确识别样式表，修改成：

  <link rel="stylesheet" type="text/css" href="css/styles.css">
  

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