使用 js/jQuery/css 在重力形式中覆盖 !important？答案

【问题标题】：Override !important in gravity forms using js/jQuery/css?使用 js/jQuery/css 在重力形式中覆盖 !important？
【发布时间】：2015-03-13 10:39:51
【问题描述】：

我正在尝试在使用 !important 的 wordpress 中覆盖重力网络表单中的样式

我试图覆盖的代码是<label class="gfield_label" for="input_1_20">Street Name<span class="gfield_required">*</span></label>

该部分的 CSS 是；

.gfield_label {
  margin: 10px 0 20px 0 !important;
  font-weight: bold;
  color: #000;
  display: inline-block;
  line-height: 1.2em;
  clear: both;
}

我很乐意用 class="gfield_label" 覆盖所有内容

我尝试了以下但没有成功；

一个

jQuery('gfield_label').attr('style', 'margin: 15px 0 5px 0 !important;');

两个

( '.gfield_label' ).each(function () {
    this.style.setProperty( 'margin', '15px', '0', '5px', '0', '!important' );
});

三个

jQuery( ".gfield_label" ).css( "cssText", "margin: 15px 0 5px 0 !important;" );

四个

label[for=input_1_20] .gfield_label {
    margin: 15px 0 5px 0 !important;
    }

我已经在网站上测试了 jQuery，它正在运行。

自定义 CSS 和 jQ 正在页面底部加载，位于重力表单使用的 css 文件链接之后。

非常感谢任何帮助！

【问题讨论】：

对不起！问题是什么？您是否尝试过使用 CSS 覆盖父类，例如 .parent-class .gfield_label { margin: 15px 0 5px 0 !important; }
终于用这个#form-bg .gfield_label { margin-top: 15px !important; margin-bottom: 5px !important; }砸了它

标签： javascript jquery css wordpress gravity-forms-plugin

【解决方案1】：

进入插件设置，将“output css”切换为“No”。

这些家伙必须学习如何设计。他们所有的 !important 让我头疼

【讨论】：

【解决方案2】：

您可以通过在您的 footer.php 中 <?php wp_footer(); ?> 之后添加以下代码，使用 css 轻松覆盖这些

<style>
label[for=input_1_20] .gfield_label {
    margin: 15px 0 5px 0 !important;
}
</style>

【讨论】：

每次更新主题时，这不会被覆盖吗？我的主题也不允许我编辑这个。