Изменение диапазона классов CSS находится в div - PullRequest
Новая
       8

Изменение диапазона классов CSS находится в div

0 голосов
/ 22 октября 2018

Я пытаюсь изменить размер шрифта для div class = wcsatt-option-wrapper и span class = price subscription-price, используя WordPress style.css.

Я могу успешно отредактировать класс div, однако я пробовал несколько вариантов комбинаций div и 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>

Пользовательский вид текста, который я пытаюсь редактировать Используя инструменты разработчика 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

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Я предполагаю, что это тема Wordrpress, учитывая имя класса woocomece.

Вы можете переопределить этот класс в

'custom css'

опция в теме WP или редактировать ее непосредственно в файлах

'Apparence> Edit CSS'

Было бы что-то вроде этого 

.wooComerce-Price-CurrencySymbol {
    font-size: 14px;
}
0 голосов
/ 22 октября 2018

Вы можете заменить эту строку на код, который вы видите на скриншоте:
https://i.imgur.com/OKzVu0C.png

Это не круто, верно?

...