覆盖被迫wordpress CSS样式

我正在考虑把这个放在wordpress stackexchange网站上，但它必须做更多的CSS和Wordpress。覆盖被迫wordpress CSS样式

但是，除非我必须进入一些插件css文件来定制css，那么我必须去那里问这个问题吗？

我正在寻找覆盖一些！重要的css样式来自我的主题（Genesis框架与自定义最小专业儿童主题）或重力形式插件。

You'll see here on this page我有一个窗口大小的窗体。在500像素，我希望所有的选择和输入字段的宽度为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？

UPDATE：

好了，所以我包括两套不同的亚历山大·奥马拉&法比奥布局风格，但既不工作？

我已经评论过此代码片段的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; 
    } 

}

我设定，让当施加或者蓝色的边框显示了他们周围的亚历山大·奥马拉的片段或红色边框显示了法比奥的片段的作品风格。到目前为止，当我将它们来回切换时，没有运气。

这就像它完全忽略这些样式？

来源

2014-09-06 kia4567

您可以用!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类，您可以将它们替换为另外两个类，您尝试覆盖的元素是其后代。

来源

2014-09-06 18:51:01

感谢您的评论！它没有工作..请参阅我修改的问题。谢谢！ – kia4567 2014-09-06 21:04:33

@ kia4567我无法在您的活页上的CSS中找到它们。他们应该工作，你确定他们被包括在网页上吗？ – 2014-09-06 22:59:24

我有一些与该网站相关的地址和一些其他插件的问题。所以我终于把它拿下来并进行了测试。有用。所以谢谢！ – kia4567 2014-09-19 20:41:53

得到了问题。样式表是深层目标元素与他们的类名，所以你的一般覆盖不会为他们做任何事情，只会应用于没有这些类的元素。

所以，你需要改变

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; 
}

和任何元素你想要的目标。

现在，您的样式重写与已经声明的样式重叠完全相同，因此实际上并不了解这一点。但是，如果您稍后想要应用其他样式，请在此处填写您的答案

来源

2014-09-06 18:50:46 Devin

感谢您的评论！它没有工作..请参阅我修改的问题。谢谢！ – kia4567 2014-09-06 21:09:51

覆盖被迫wordpress CSS样式

回答

相关问题