CSS 文件和检查器不匹配



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

CSS

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

检查员

.entry-content p {
margin: 0;
}

最常见的原因是浏览器缓存。当您使用WordPress将脚本或样式表排队时,wp_enqueue_scriptwp_enqueue_style函数允许您指定一个";版本";在第4个参数中。此版本会像?ver=一样附加到您的URL中。

您可以利用这一点,让服务器读取上次修改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参数(如?version=1234(来更改加载文件的link标记,并在每次CSS更改时更改该标记。

服务器缓存

在某些情况下,服务器每次处理请求时都要生成一个页面,这是一项劳动密集型工作。为此,会生成静态网页,虽然静态文件的生命周期尚未结束,但您将始终获得旧版本。您可以清除服务器缓存,这是一项非常严厉的措施,或者确保给定文件的缓存仅无效,这取决于您使用的服务器缓存。

错误的文件

同一文件可能有多个副本,您对其中一个副本应用了修复程序,而另一个副本仍然是旧版本。搜索文件并查看是否有多个副本。

服务器工具

您可能有一些服务器工具,可以在发送CSS文件之前对其进行预处理。迷你图就是一个例子。虽然您的源文件可能已正确更改,但该文件的未更改模糊副本可能正在使用中。

最新更新