CSS 更改不会在浏览器中显示

Question

我已经对网页上的 css 文件进行了更改。它们在编辑器模式下完美显示，但在任何浏览器中都无法显示。我的样式表或 HTML 表以前从未遇到过这个问题，不确定我做错了什么。

检查了我的代码（一切似乎都很好，尤其是当它们在编辑器模式下正确显示时）

如有任何帮助，我们将不胜感激。

我尝试过的： -更新了我的浏览器

• 清除缓存
• 很难刷新我的浏览器

我的代码

 <link rel="stylesheet" href="{{ blog.blog_path }}style.css" type="text/css" />
 
 <link rel="alternate" href="{{ blog.blog_path }}index.rss" type="application/rss+xml" title="RSS" />

Answer 1

所以这件事很久以前发生在我身上，我想我可以帮助你。

• 也许具有更高特异性的 CSS 规则胜过您期望应用的规则

• 您的对象是另一个使用 !important 关键字的 css 规则的目标。

• 也许尝试做 Ctrl + F5 ，强制更新，忽略任何缓存。

• 尝试重命名css文件，看看是否有变化

有一个更简单的方法，这取决于你是否有一个可以运行 php 的网络服务器，或者你是否只有一个 .html 文件。

如果你有一个 php 服务器，只需将 添加到 css 文件末尾的“？”之后，就像这样：

<link href="path_to_css_file.css?v=<?php echo microtime(true); ?>" type="text/css" rel="stylesheet">

但是如果你只有一个 html 文件，我认为你可以使用 javascript 来完成。 将你的 css 文件放在头部：

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

然后添加

document.addEventListener("DOMContentLoaded",() => {
    document.querySelectorAll("link").forEach((link) => {
        link.href += (link.href.includes("?") ? "&v=" : "?v=")+Date.now();
    });
});

到您的页面（在 javascript 元素内）以“刷新”页面中的链接元素（css 样式表）。 这个问题也可能发生在图像上，要解决它我认为你也需要更改链接，我仍然不知道为什么会这样，我知道它链接到浏览器的缓存，但我不清楚为什么。

无论如何，这个已经讨论很久了，这里是post，我只是做了一点简历来加快速度。如果你想进入复杂的东西，那就继续吧。