Question

我正在尝试使用WordPress style.css编辑div class = wcsatt-option-wrapper和span class = price subscription-price的字体大小。

我可以成功编辑div类，但是，我尝试了div和span组合的几种变体，并使用！important，但是没有改变目标span的字体。

<div class="woocommerce-variation single_variation" style="">
    <div class="woocommerce-variation-description"></div>
    <div class="woocommerce-variation-price">
        <span class="price">
            <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-currencySymbol">$</span>
                "15.99"
            </span>
        </span>
        <div class="wcsatt-options-wrapper">
            <h3>Choose a subscription plan:</h3>
        <ul class="wcsatt-options-product">
            <li class="one-time-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="[]" value="0" checked="checked">
                    <span class="one-time-option-details">none</span>               
                </label>
            </li>
            <li class="subscription-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="{";ubscription_scheme":{"period":"month","interval":1,"length":0,"trial_period":"","trial_length";:"","pricing_mode":"inherit","discount":"7";,"sync_date":0,"context":"product","id":"1_month","key":"1_month","is_synced":false,"is_prorated":false},"overrides_price":true,"discount_from_regular":false}" value="1_month">
                    <span class="subscription-option-details">
                        <span class="price subscription-price">
                            <del>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.99"
                                </span>
                            </del> 
                            <ins>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "14.87"
                                </span>
                            </ins> 
                            <span class="subscription-details"> / month</span>
                        </span>
                    </span>
                </label>
            </li>
            <li class="subscription-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="{"subscription_scheme":{"period":"month","interval":3,"length":0,"trial_period":"","trial_length":"","pricing_mode":"inherit","discount":"5","sync_date":0,"context":"product","id":"3_month","key":"3_month","is_synced":false,"is_prorated":false},"overrides_price":true,"discount_from_regular":false}" value="3_month">
                    <span class="subscription-option-details">
                        <span class="price subscription-price"> 
                            <del>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.99"
                                </span>
                            </del> 
                            <ins>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.19"
                                </span>
                            </ins> 
                            <span class="subscription-details"> every 3 months</span>
                        </span>
                    </span>             
                </label>
            </li>
        </ul>
        </div>
    </div>
    <div class="woocommerce-variation-availability"></div>

User view of text I am trying to edt 使用chrome开发工具，我可以通过以下方式调整CSS：

.product .summary.entry-summary .price, .product-category .
woo-content- container > a h3, .product-category .woocom-list-content 
> a 
h3, #customer_login h2 {
font: bold 20px / 24px "Roboto Slab", Helvetica, Arial, Verdana, 
sans-serif;
text-transform: none;
}

但是，当我将这些更改应用于WordPress style.css工作表时，不会进行调整。 chrome dev tool adjustments

Answer 1

请您将此行替换为您在屏幕截图中看到的以下代码：
https://i.imgur.com/OKzVu0C.png

这不酷吧？

Answer 2

根据woocomece类的名称，我猜是Wordrpress主题。

您可以在

中覆盖该类

“自定义CSS”

WP主题中的

选项或直接在文件中对其进行编辑

“外观>编辑CSS”

会是这样的

.wooComerce-Price-CurrencySymbol {
    font-size: 14px;
}

更改位于div中的span类CSS

2 个答案: