Question

希望您能帮我这个忙。我正在使用 Woocommerce 和 YITH WooCommerce存款和预付款插件运行我的网站。在产品页面中，我们可以看到两行，一行是全额付款，另一行是定金支付...

我需要绿色的第一个（全额付款）。但是，当我使用“标签” css样式更改该行的颜色时，两行都变为绿色。

任何想法如何实现？再次非常感谢。

我使用的代码将两行都变为绿色

    label {
display: block;
font-size: 14px;
color: #ff6600;
font-weight: 400;
margin-bottom: 5px;
vertical-align: middle;

}

Woocommerce产品页面上的代码

<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
    <div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="rate" data-deposit-amount="5" data-deposit-rate="30" data-price-template="&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;/span&gt;0&lt;/span&gt;" >
                <label>
            <input type="radio" name="payment_type" value="full"  checked='checked' /> Pay full price (7% discount)             <span class="full-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>79.990</span> )</span>
        </label><br>
        <label>
            <input type="radio" name="payment_type" value="deposit"  /> Pay Deposit             <span class="deposit-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>23.997</span> )</span>
        </label><br>

        </div>

插件代码：

<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
<?php do_action('yith_wcdp_before_add_deposit_to_cart', $product, isset( $variation ) ? $variation : false )?>
<div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="<?php echo isset( $deposit_type ) ? esc_attr( $deposit_type ) : '' ?>" data-deposit-amount="<?php echo isset( $deposit_amount ) ? esc_attr( $deposit_amount ) : '' ?>" data-deposit-rate="<?php echo isset( $deposit_rate ) ? esc_attr( $deposit_rate ) : '' ?>" data-price-template="<?php echo esc_attr( wc_price( 0, array( 'decimals' => 0 ) ) ) ?>" >
    <?php if( ! $deposit_forced ): ?>
        <label>
            <input type="radio" name="payment_type" value="full" <?php checked( ! $default_deposit ) ?> /> <?php echo apply_filters( 'yith_wcdp_pay_full_amount_label', __( 'Pay full amount', 'yith-woocommerce-deposits-and-down-payments' ) ) ?>
            <span class="full-price">( <?php echo isset( $variation ) ? $variation->get_price_html() : $product->get_price_html() ?> )</span>
        </label><br>
        <label>
            <input type="radio" name="payment_type" value="deposit" <?php checked( $default_deposit ) ?> /> <?php echo apply_filters( 'yith_wcdp_pay_deposit_label', __( 'Pay deposit', 'yith-woocommerce-deposits-and-down-payments' ) ) ?>
            <span class="deposit-price">( <?php echo wc_price( $deposit_value ) ?> )</span>
        </label><br>

    <?php else: ?>
        <?php echo wp_kses_post( apply_filters( 'yith_wcdp_deposit_only_message', sprintf( __( 'This action will let you pay a deposit of <span class="deposit-price">%s</span> for this product', 'yith-woocommerce-deposits-and-down-payments' ), wc_price( $deposit_value ) ), $deposit_value ) ) ?>
    <?php endif; ?>
</div>

Answer 1

您可以尝试使用 span 标记作为选择器来上课：

.full-price {
  display: block;
  font-size: 14px;
  color: #ff6600;
  font-weight: 400;
  margin-bottom: 5px;
  vertical-align: middle;
}

我希望我有所帮助；）

Answer 2

您需要为该输入找到唯一的选择器，因为选择器label太笼统了，它不仅将自身应用于您列出的这两个元素，而且还将应用于页面上的任何其他标签。面临的挑战是找到完美的“独特性”，以便将样式仅应用于所需的标签。

我想您只希望将这些样式应用于这些定金/全价购买选项。另外，由于该区块（id）有#yith-wcdp-add-deposit-to-cart，因此您一次只能显示单个商品的购买。

我在下面修改了您的样式表，以便您为label创建的所有样式都应用于定金和全价期权标签（color除外）。然后，您可以使用:first-of-type选择全价选项，然后使用:nth-of-type(2)选择第二个存款选项，并根据需要设置color或其他样式。

您可以根据需要使用:nth-of-type(1)选择完整的价格标签。

:nth-of-type(n) 是CSS样式的伪类，它将选择该元素的第n个出现位置并应用样式。例如:nth-o-type(5)仅适用于第五次出现。您还可以替换n个更复杂的代数公式“ odd”或“ even”，以便将样式应用于与给定模式匹配的多个元素。

#yith-wcdp-add-deposit-to-cart label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
  vertical-align: middle;
}

#yith-wcdp-add-deposit-to-cart label:first-of-type {
  color: #ff6600;
}

#yith-wcdp-add-deposit-to-cart label:nth-of-type(2) {
  color: #0066ff;
}

<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
    <div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="rate" data-deposit-amount="5" data-deposit-rate="30" data-price-template="&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;/span&gt;0&lt;/span&gt;" >
                <label>
            <input type="radio" name="payment_type" value="full"  checked='checked' /> Pay full price (7% discount)             <span class="full-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>79.990</span> )</span>
        </label><br>
        <label>
            <input type="radio" name="payment_type" value="deposit"  /> Pay Deposit             <span class="deposit-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>23.997</span> )</span>
        </label><br>

        </div>

更改全额付款和定金付款句子的颜色-Woocommerce产品页面

2 个答案: