Question

我能帮忙吗？我正在努力克服Wordpress自定义字段搜索插件上的CSS，这似乎对窗口小部件和页面中出现的搜索框使用相同的样式。如果您查看http://www.landedhouses.co.uk/parties/，则小部件中的搜索框会显示白色文本，但页面上不会显示白色文本。任何想法如何解决这一问题！？不幸的是，将这个添加到页面的php没有实现任何目标：

    <h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search')) 
wp_custom_fields_search(); ?></p>

非常感谢！

Answer 1

这是导致问题的样式规则。

/* searchforms.css line 15 */
.searchform-label {
  display: block;
  float: left;
  width: 200px;
  overflow: hidden;
  font-size: 1.1em;
  font-family: sans-serif;
  font-weight: bold;
  padding-top: 4px;
  color: white;
}

您可以使用css做一些事情。您可以在样式表中制作覆盖规则：

.searchform-label {
  color: black;
}

如果这不起作用，您可以制定更具体的规则：

label.searchform-label {
  color: black;
}

或者您可以在最糟糕的情况下制定!important规则。

.searchform-label {
  color: black !important;
}

Answer 2

作为上述答案的延伸（我仍然无法评论:(）

一般来说，如果原始版本不使用！important，则更具体的规则将覆盖该属性

因为原始目标.searchform-label，您只需要定位更具体的内容，例如label.searchform-label，如果不起作用，请包含直接父元素和>，例如如果标签包含在P中，请使用p>label.searchform-label

应该很少需要！重要，尽管他们应该制作一个！并不重要，以便轻松覆盖：D

使用Wordpress插件的CSS覆盖

2 个答案: