在 Chrome 开发者工具中编辑 css 后，css 文件不加载

Question

我正在本地机器上开发一个带有 css 文件的基本网页，并通过直接从文件系统在浏览器中打开 html 文件进行测试。

这可行，但是现在因为使用 Chrome 开发人员工具通过在 Sources 选项卡下编辑 css 文件来使用不同的样式，所以每当我刷新页面时，CSS 都不会加载，直到我再次在源选项卡中编辑它 -只需在末尾添加一个 return 就足以加载所有 CSS。

此外，有时在刷新页面时，Sources 选项卡会显示 css 文件的内容已损坏（加载随机字符）

我已经通过验证器运行了 css，它说一切都很好，并且页面上没有 javascript

我不是网络开发人员，所以可能遗漏了一些明显的东西......

Answer 1

发生这种情况是因为您正在 Inspect Element（Chrome 开发人员工具）内编辑 css。

这是因为 css 确实存在于网页上，它是从您桌面上的实际 css 文件（您网站文件夹中的 css 文件）中提取的。

因此，您永远不会真正更改计算机上的实际css，只是在浏览器中，这是暂时的，因为每次重新加载页面时都会加载计算机中相同的旧 css（直到您修改您计算机上的 CSS）。

您应该在文本编辑器（notepad++、visual studio 代码、atom、sublime 文本等）中编辑您计算机上实际 css 文件中的更改。

这样，它就会按照你的意愿工作！希望你明白我的意思，如果没有，请告诉我，以便我再次澄清:)