如何解决CSS 文件和检查器不匹配

我在一个 WordPress 网站上工作。我更改了一行 CSS，但无论我做什么，都不能反映我本地开发环境中的更改。我试过关闭并重新启动一切，但它仍然不匹配。我认为可能是另一个规则覆盖了它，但检查员显示它来自我的 CSS 文件中完全相同的行。我已经在 Chrome 和 Firefox 中检查过这个。我不知道为什么浏览器没有收到更改。

CSS

.entry-content p {
        margin-bottom: 10px;
    }

检查员

.entry-content p {
        margin: 0;
    }

解决方法

最常见的原因是浏览器缓存。当您使用 WordPress 将脚本或样式表排入队列时，wp_enqueue_script 和 wp_enqueue_style 函数允许您在第 4 个参数中指定“版本”。此版本会像 ?ver= 一样附加到您的网址中。

您可以利用这一点，让您的服务器读取上次修改 CSS 或 JS 文件的时间（使用 filemtime()）并将其用作版本号。这将确保您的文件永远不会被缓存，因为对文件的更改将产生一个新的 URL。

我在下面提供了一个示例：

function enqueue_scripts()
{
    $relative_path = '/style.css';

    wp_enqueue_style( 'my-script',get_theme_file_uri( $relative_path ),[],filemtime( get_theme_file_path( $relative_path ) ) );
}

add_action( 'wp_enqueue_scripts','enqueue_scripts' );

很难确定究竟是什么原因导致了您的问题，因此我的回答将重点关注可能是什么原因造成的。

浏览器缓存

Web 浏览器暂时保存 CSS 文件，暂时不会请求它们以减少资源浪费。当该缓存期结束时，浏览器将再次请求该文件。

您可能希望通过添加一些 URL 参数（例如 link）来更改加载文件时加载文件的 ?version=1234 标记，并在每次 CSS 更改时更改该参数。

服务器缓存

在某些情况下，服务器在每次请求寻址时生成页面是劳动密集型的。为此，正在生成静态网页，虽然该静态文件的生命周期尚未结束，但您将始终获得旧版本。您可以清除服务器缓存，这是一项严厉的措施，或者确保给定文件的缓存仅失效，具体取决于您使用的服务器缓存。

错误的文件

可能存在同一文件的多个副本，并且您对一个副本应用了修复程序，而另一个副本仍然具有旧版本。搜索文件并查看是否有多个副本。

服务器工具

您可能有一些服务器工具，可以在发送 CSS 文件之前对其进行预处理。一个例子是压缩器。虽然您的源文件可能已被正确更改，但可能正在使用该文件的未更改混淆副本。

CSS 文件和检查器不匹配