为什么我的自定义CSS代码不起作用？

Question

我尝试使用菜单视口的 elementor 为某个 css 添加自定义 css

我尝试将此代码输入到 element 或自定义 css

@media (min-width: 768px) {
    .elementor-1798 .elementor-element.elementor-element-2b9e1e5d {
        width: 62% !important;
    }
}

但是当我刷新我输入的自定义CSS代码时不起作用/应用

Answer 1

您可以采取以下几个步骤来排查自定义 CSS 不起作用的原因：

1. 确保正确定位：确保 CSS 选择器 .elementor-1798 .elementor-element.elementor-element-2b9e1e5d 准确定位您想要设置样式的元素。您可能需要检查 Elementor 布局的 HTML 结构来确认这一点。

2. 特异性：确保您的 CSS 选择器具有足够的特异性来覆盖应用于目标元素的任何现有样式。像您一样添加 !important 会有所帮助，但通常最好尽可能避免使用 !important。 清除缓存：有时，缓存会阻止 CSS 更改立即生效。尝试清除浏览器缓存或您可能正在使用的任何缓存插件。

3. 检查错误：确保 CSS 代码中没有语法错误或拼写错误。即使是一个小错误也可能导致整个规则被忽略。

4. 插件冲突：确保与其他插件或主题样式不存在冲突，这些插件或主题样式可能会覆盖您的自定义 CSS。您可以通过暂时停用其他插件或切换到默认 WordPress 主题来查看问题是否仍然存在。

5. Elementor 主题生成器：如果您使用的是 Elementor Pro，您可能还想检查您的自定义 CSS 是否与 Elementor 主题生成器中的任何设置冲突。

6. 测试：尝试简化你的CSS规则，看看是否生效。例如，您可以尝试应用简单的样式（例如更改背景颜色）来确认 CSS 是否已应用。

7. 更新 Elementor：确保您使用的是最新版本的 Elementor，因为更新通常包括可能影响自定义 CSS 处理方式的错误修复和改进。

通过执行这些步骤，您应该能够确定自定义 CSS 未应用的原因并有效地解决问题。