覆盖强制的WordPress CSS样式

时间:2014-09-06 作者:kia4567

我想把这个放在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样式的屏幕截图(您也可以右键单击其中一个输入,也可以看到这个)。

enter image description here

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

我玩过这些风格,但显然我错过了什么?霍普弗利?

1 个回复
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;
  }
}

结束

相关推荐

向子页面中的主导航菜单添加一种css样式

我有一个WordPress网站,根据用户是否在该页面上,向主导航添加自定义样式。我的网站的文章部分有几篇文章,用户可以访问。我使用如下所示的css样式,当查看器位于文章页面上时,这种样式会达到预期效果,WordPress会将当前菜单项类添加到html标记中:#navigation li a:hover, #navigation li.current-menu-item a { text-shadow: 1px 1px 2px red; -webkit-transition: color 0