我想把这个放在wordpress的stackexchange网站上,但它必须比wordpress更多地使用CSS。
然而,除非我必须进入一些插件css文件来定制css,否则我必须去那里问这个问题?
我想改写一些!重要的css样式来自我拥有的主题(Genesis框架,具有自定义的最小亲子主题)或gravity forms插件。
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样式的屏幕截图(您也可以右键单击其中一个输入,也可以看到这个)。
我的问题是,如何用媒体查询集宽度覆盖这些顶级样式?
我玩过这些风格,但显然我错过了什么?霍普弗利?
SO网友:Seamus Leahy
其中一些插件和框架允许您禁用默认样式,然后允许您复制它们的样式,然后根据主题进行更改。但让我们说这是不可能的。那么你需要更高的CSS selector precedent 而不是他们的CSS。复制选择器的最简单方法,然后make sure your CSS is included after theirs.
@media only screen and (max-width: 500px)
.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,
.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: 100%!important;
}
}