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= 一样附加到您的网址中。

您可以利用这一点,让您的服务器读取上次修改 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 文件之前对其进行预处理。一个例子是压缩器。虽然您的源文件可能已被正确更改,但可能正在使用该文件的未更改混淆副本。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...