不同页面相同类名引发的WordPress缓存问题

嘿，这个问题我之前帮不少用Divi+WP Rocket的开发者排查过，核心是CSS作用域缺失加上缓存放大了样式冲突——咱们一步步来解决，完全不用牺牲缓存效率：

1. 用页面专属body类限定样式作用域 #

WordPress会给每个页面的<body>标签自动添加专属类，比如博客页面会有blog类，自定义页面会有page-id-xxx类。你只需要给原来的CSS加个父级限定就行，不用重新写一堆新类：

/* 只给博客页面的et_pb_section加背景 */
body.blog .et_pb_section {
  background-image: url('你的背景图路径');
  /* 其他背景相关样式 */
}

这样修改后，WP Rocket合并缓存时依然能正常压缩合并这段代码，完全不会影响缓存的意义——只是多了个父级选择器，代码量几乎没增加，反而让样式更精准。

2. 检查WP Rocket的CSS优化设置 #

你说之前没问题突然出现这个情况，大概率是缓存规则变了！比如你是不是最近开启了移除未使用的CSS功能？这个功能有时候会误判，把博客页面的背景样式错误地标记为“全局可用”，导致其他页面也加载。

• 可以先暂时关闭这个功能测试，如果恢复正常，就去WP Rocket的「未使用CSS」设置里，把body.blog .et_pb_section这类精准选择器加入白名单，确保它只作用在目标页面。

3. 给目标section加自定义专属类（最稳妥的方案） #

如果上面的方法还是有问题，直接给博客页面的那个et_pb_section模块加个自定义类：

1. 在Divi编辑器里选中这个section，打开「高级」选项卡
2. 在「CSS ID & Classes」的「CSS Class」里输入一个专属类，比如blog-featured-section
3. 然后写对应的CSS：

.blog-featured-section {
  background-image: url('你的背景图路径');
}

你担心“每个背景都建类会让CSS变多，失去缓存意义”？完全不用怕——WP Rocket的合并压缩会把这些零散的小选择器整合成高效的代码，而且这种精准控制反而能减少不必要的样式加载，让缓存后的CSS更轻量化。

为什么之前没问题？ #

大概率是之前的模板或者CSS里已经隐含了作用域（比如页面ID限定），后来你修改模板、更新Divi或者调整WP Rocket设置时，这个作用域不小心被移除了，才导致样式全局污染。

内容的提问来源于stack exchange，提问作者Saypontigohe