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

Question

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

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

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

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

提前致谢!

Answer 1

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

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

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