链接 CSS 样式表提供错误的文件答案

【问题标题】：Linking CSS stylesheet serves wrong file链接 CSS 样式表提供错误的文件
【发布时间】：2017-06-20 20:56:00
【问题描述】：

我有一个奇怪/令人沮丧的问题。我正在尝试将我的 CSS 样式表链接到我的 HTML，当我在 Chrome 开发工具中检查文件的实时状态时（相反，为什么我的样式不起作用），我得到了一个完全不同的文件，显示为我的.css 文件。

这是我的文件目录：

- app
  - public
    - file1.html
    - file2.html
- assets
  - style
    - reset.css
    - style.css

这是 file1.html 的头部：

<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/style/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="blahblahblah" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../../assets/style/style.css">

最后一行是我的相对路径。

当我通过开发工具查看 file2.html 的内容时，它显示为 style.css 的内容，但 style.css 中真正包含的只是 h1 元素的一些样式。我只是作为 CSS 文件的相对文件路径的假人吗？我想也许其他 CSS 样式表阻碍了这个样式表，但是将它们注释掉仍然会导致 file2.html 的内容作为我的 css 文件。我错过了什么？

【问题讨论】：

路径似乎是正确的。您是否绝对肯定之后没有加载其他样式表并且 reset.css 文件没有标记为 !important 的属性？使用 !important 会覆盖所有优先级。此外，我还建议您查看其他浏览器上的页面，以确保它不是缓存问题。有时用 F5 或 CTRL+F5 刷新仍然使用缓存的元素，可能不是最新的。
不，我觉得一切都很好。我复制并粘贴了您的 file1.html 并看到 unpkg.com/purecss@0.6.2/build/grids-responsive-min.css 出现 404 错误，但它的 URL 中有一个 space 可能与 SO 编辑器相关，但否则您的实现是正确的。
@arktoga 感谢您的评论！我已经尝试使用 Safari、Firefox 和 Chrome，并且实际上都显示了带有 file2.html 内容的 css 文件（reset.css 文件和 style.css）。
感谢@dereknutile 检查！是的，我认为该空间不在实际文件中。

标签： html css

【解决方案1】：

您的路径似乎是正确的，但这可能是因为您缺少完整性属性的结束引号。

【讨论】：

谢谢@sarahjee。当我不想占用一整行代码中的实际属性时，我不小心在 SO 编辑器中这样做了。我现在就修。

【解决方案2】：

所以这是在一个快速应用程序中，我没有提供我的公共文件夹，以便它可以使用它来访问静态文件。

需要这个：

app.use(express.static(path.join(__dirname, '../public')));

【讨论】：

【解决方案3】：

您的第三个链接在 blahblahblah 之后缺少一个 "。尝试修复它。

【讨论】：

谢谢@marcelo。我不小心在 SO 编辑器中这样做了，实际代码中并没有丢失它。
这更像是一个评论而不是一个答案。您是在建议/指导而不是提供明确的答案。当没有直接答案时，您不想将问题标记为已回答。