CSS Класс не кажется живым

Question

Я уже несколько месяцев сдаюсь. «Специфика» класса CSS просто не работает, и я понятия не имею, почему.

Код

 .characteristic-product-comparator {
        font-size:18px;
        font-weight:bold;
        margin-bottom:15px;
        padding-bottom:20px;
        border-bottom:1px #211E33 solid;
    }
     div.characteristic-product-comparator .specifics {
        font-weight:normal !important;
        font-size:16px;
    }

    <div class="characteristic-product-comparator">
    <p>Résolution<br> <span class="specifics">2160p</span></p>
    <p>Micro<br> <span class="specifics">Oui</span></p>
    <p>Caractéristiques<br> <span class="specifics">Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</span></p>
    </div>

• Я попытался указать c в файле CSS, например: div.characteristi c -продукт-компаратор p span.specifics но это не сработало.

• Я также пытался переименовать .specifics с помощью .bobby, но это также не сработало.

Этот класс с другой стороны:

.characteristic-product-comparator

работает нормально.

span class = "specics" просто не наследует класс ... Почему ".specifics" не оказывает никакого влияния на HTML?

PS: я на WordPress и использую Divi . Я не знаю, могут ли файлы Divi CSS быть связаны с этой проблемой.

Большое спасибо.

Answer 1

Специальный символ в "Special" делает CSS не работающим. Я удивлен и забавен этой находкой: >>

 .characteristic-product-comparator {
        font-size:18px;
        font-weight:bold;
        margin-bottom:15px;
        padding-bottom:20px;
        border-bottom:1px #211E33 solid;
    }
     div.characteristic-product-comparator .specifics {
        font-weight:normal !important;
        font-size:16px;
    }

    <div class="characteristic-product-comparator">
    <p>Résolution<br> <span class="specifics">2160p</span></p>
    <p>Micro<br> <span class="specifics">Oui</span></p>
    <p>Caractéristiques<br> <span class="specifics">Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</span></p>
    </div>

Answer 2

Я полагаю, что у вас проблема с CSS вашей темы или проблема с Safari.

Что еще более важно, упрощение HTML может устранить необходимость в каких-либо неудобных CSS.

.characteristic-product-comparator {
    font-size:18px;
    margin-bottom:15px;
    padding-bottom:20px;
    border-bottom:1px #211E33 solid;
}
.characteristic-product-comparator p {
    font-size:16px;
}

<div class="characteristic-product-comparator">
   <h2>Résolution</h2><p>2160</p>
   <h2>Micro</h2><p>Oui</p>
   <h2>Caractéristiques</h2><p>Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</p>
</div>