Question

我想把它放在wordpress stackexchange网站上，但它必须用CSS做更多的事情然后Wordpress。

然而，除非我必须进入一些插件css文件来自定义css然后我必须去那里问这个问题？

我希望覆盖一些重要的css样式，这些样式来自我所拥有的主题（带有自定义Minimum Pro子主题的Genesis Framework）或者重力形式插件。

You'll see here on this page我有一个用窗口调整大小的表单。在500 px时，我希望所有选择和输入字段的宽度都是100％。我已在媒体查询中找到特定位置并将代码放在那里。但是因为宽度：95％！重要;已经设置了一些地方（不在我的样式表中）我的100％被95％覆盖。

这些是我想要覆盖的样式

.gform_wrapper .ginput_complex input[type=text], 
.gform_wrapper .ginput_complex input[type=url], 
.gform_wrapper .ginput_complex input[type=email], 
.gform_wrapper .ginput_complex input[type=tel], 
.gform_wrapper .ginput_complex input[type=number], 
.gform_wrapper .ginput_complex input[type=password], 
.gform_wrapper .ginput_complex select {
    width: 95% !important;
}

.gform_wrapper .ginput_complex .ginput_right input[type=text], 
.gform_wrapper .ginput_complex .ginput_right input[type=url], 
.gform_wrapper .ginput_complex .ginput_right input[type=email], 
.gform_wrapper .ginput_complex .ginput_right input[type=tel], 
.gform_wrapper .ginput_complex .ginput_right input[type=number], 
.gform_wrapper .ginput_complex .ginput_right input[type=password], 
.gform_wrapper .ginput_complex .ginput_right select {
    width: 95% !important;
}

这是我的整体覆盖风格，我想申请所有表格

@media only screen and (max-width: 500px)
input, select, textfield {
width: 100%!important;
}

因为这是wordpress我没有HTML，但我已经截取了css样式的截图（你也可以右键点击其中一个输入并看到它）。

enter image description here

我的问题是如何用我的媒体查询集宽度覆盖这些顶级样式？

我玩过这些风格，但显然我错过了一些东西？ Hoepfully？

更新：

好的，所以我加入了Alexander O＆＃39; Mara＆amp; Sons拍摄的两套不同风格。法比奥，但都没有奏效？

我已经为此代码段注释了Alexander O＆＃; Mara代码。但你可以看到我是如何实现它们的。

@media only screen and (max-width: 500px) {

    a.alignright, img.alignright, .wp-caption.alignright {
            width: 100%;
    }

    .gform_wrapper ul li.gfield {
        width: 100%!important;
    }

    .ginput_left, .ginput_right { 
        width: 100%!important; 
        margin-top: 1.5em;
    }

    input, select, textfield { width: 100%!important;}

    .ui-datepicker-trigger { display: none;}

    .gform_wrapper .ginput_complex input[type="text"] {width: 100%!important;}

    .header-image .site-title a {
        background-size: contain !important;
        margin: 0 auto;
        max-width: 300px;
        padding: 11% 0;
    }


    /*.apply-now-form_wrapper .top_label input.medium, 
    .apply-now-form_wrapper .top_label select.medium {
        width: 100%!important;
        border: 2px solid blue;
    }*/

    html .gform_wrapper .ginput_complex input[type=text],
    html .gform_wrapper .ginput_complex input[type=url],
    html .gform_wrapper .ginput_complex input[type=email],
    html .gform_wrapper .ginput_complex input[type=tel],
    html .gform_wrapper .ginput_complex input[type=number],
    html .gform_wrapper .ginput_complex input[type=password],
    html .gform_wrapper .ginput_complex select {
        width: 100% !important;
        border: 2px solid red !important;
    }

}

我进行了设置，以便在应用样式时，在Alexander O＆＃39; Mara的片段中会出现蓝色边框，或者出现与Fabio的片段作品的红色边框。到目前为止，当我来回切换它们时，没有运气。

它完全无视这些风格吗？

Answer 1

您可以使用!important样式的更具体的选择器覆盖!important个样式。例如，要覆盖以下规则。

.gform_wrapper .ginput_complex input[type=text],
.gform_wrapper .ginput_complex input[type=url],
.gform_wrapper .ginput_complex input[type=email],
.gform_wrapper .ginput_complex input[type=tel],
.gform_wrapper .ginput_complex input[type=number],
.gform_wrapper .ginput_complex input[type=password],
.gform_wrapper .ginput_complex select {
    width: 95% !important;
}

您可以使用html为所有规则添加前缀。

html .gform_wrapper .ginput_complex input[type=text],
html .gform_wrapper .ginput_complex input[type=url],
html .gform_wrapper .ginput_complex input[type=email],
html .gform_wrapper .ginput_complex input[type=tel],
html .gform_wrapper .ginput_complex input[type=number],
html .gform_wrapper .ginput_complex input[type=password],
html .gform_wrapper .ginput_complex select {
    width: 100% !important;
}

同样的技术适用于您的其他情况。您也不必使用gform类，您可以将它们替换为其他2个类，您尝试覆盖的元素是其后代。

Answer 2

得到了这个问题。样式表是深度定位元素及其类名，因此您的常规覆盖将不会对它们执行任何操作，只会应用于不具有这些类的元素。

所以，你需要改变

input, select, textarea {
    width: 100% !important;
}

到

.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 100% !important;
}
.apply-now-form_wrapper .top_label input.medium, .apply-now-form_wrapper .top_label select.medium {
    width: 100% !important;
}

以及你想要瞄准的任何元素。

现在，很明显你的风格覆盖与已经宣布的完全相同，所以真的不明白这个需要。但如果您想稍后再申请其他风格，请在此处获得答案

覆盖强制wordpress CSS样式

2 个答案: