CSS更改WooCommerce变体下拉WP主题上的文本颜色是压倒一切的答案

【问题标题】：CSS Change text colour on WooCommerce variation drop down WP theme is overridingCSS更改WooCommerce变体下拉WP主题上的文本颜色是压倒一切的
【发布时间】：2016-07-25 15:19:03
【问题描述】：

直截了当的问题，我有用于 WP 的 Zerif Pro，它有一个可爱的部分来自定义文本颜色。但是，这似乎覆盖了我希望成为不同颜色的某些区域。

我遇到的问题是这个页面http://www.chaotopia.com/product/aromatics-zodiac-incenses/（包括页面而不是css，因为不确定哪个部分受到影响）

如您所见，下拉列表显示为空白，因为文本是白底白字。我在产品数量上遇到了类似的问题，但设法通过在主样式表中添加黑色作为自定义颜色来找到并解决它。

不幸的是，我找不到在哪里为变体下拉菜单添加自定义颜色并将文本设置为黑色以便可以看到。我打算在多种产品上使用变体，因此理想的情况是希望任何列表都具有全局黑色文本。

提前谢谢你！

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。虽然您提供了link to an example or site，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
完全同意，但在这种情况下，不知道要从所有样式表等中包含哪些代码，所以不能但会在回答时更新。谢谢

标签： css wordpress woocommerce themes

【解决方案1】：

在 HTML 源代码的第 338 行，您有一个 <style> 块，其中包含规则 ..., select, ... { color: #ffffff; }

这是使<select> 元素内的文本变为白色的原因，但它也是为许多其他元素设置文本颜色的规则。因此，仅将其更改为 color: #000000; 是不够的 - 这也会影响许多其他元素。

相反，您只需为 <select> 元素覆盖此规则。一种方法是在 CSS 样式表中添加 select{ color: #000000; }，该样式表在行 338 之后加载，从而覆盖第一条规则。另一种方法是在任何 CSS 样式表中添加 select { color: #000000 !important; }。我会推荐前者，因为!important 规则可能会导致进一步的混乱。

【讨论】：