css - 处理 WooCommerce 变体中的文本颜色？

Question

有一个问题不知道如何解决。有product (XS 变体)是“无库存”但选择了“允许但通知客户”所以想要制作黄色变体，如下图所示。

有这个功能:

add_filter( 'woocommerce_variation_is_active', 
'grey_out_variations_when_is_backorder', 10, 2 );
function grey_out_variations_when_is_backorder( $grey_out, $variation ) {

if ( ! $variation->is_in_stock() && $variation-
 >backorders_require_notification() )
$grey_out = false; // Here text variation need to be yellow.

return $grey_out;
}

但不要解决任何问题，因为 grayout 只能获取 2 个值，true 或 false。所以我使用了这个 CSS:

.sbOptions li span.sbDisabled {
 color:red!important;
 }
.sbOptions li a {
color:green!important;
}

因此只能控制灰度变化和灰度变化。我想做的第三种选择是不可能的。想要的变体是:“缺货”+“允许，缺货但通知”=黄色背景&可以选择。目前这种变化是绿色的，因为我没有找到一种方法来处理这种变化的颜色。谢谢

Answer 1

我没有你的代码，但你可以测试一下吗？使用子类，或者在元素检查器中检查你的类是否受到影响

.content {
background:gray;
padding:5px;
margin:5px 0;
}

.content div {
  margin:5px 0;
}

.content div.blue {
  color:blue;
}

.content div.red {
  color:red;
}

.content.test div {
  color:yellow !important;
}

<div class="content">
  <div class="red">Test</div>
  <div class="blue">Test</div>
  <div>Test</div>
</div>

<div class="content test">
  <div class="red">Test</div>
  <div class="blue">Test</div>
  <div>Test</div>
</div>