Вес шрифта! Важный в идентичности элемента переопределяется

Question

У меня есть анимированный раздел в самом низу этой страницы , который работает, как и ожидалось, когда вы нажимаете на контейнер DIV «Следующая категория», за исключением того, что текст font-weight не изменяется. ..

Я понимаю, что стиль дочернего элемента всегда переопределяет родительский стиль даже с использованием !important, но мой JQuery напрямую предоставляет этому тексту класс, который имеет font-weight: 400 !important, и другие элементы втот же сайт с 400 шрифтовым весом отображает этот более легкий шрифт Google - это шрифт, который по умолчанию имеет разный вес, так что я не понимаю ...

Это jQuery

    $('.clickable').on('click', function() {
        $('.clickable').attr('id', 'ScaleDown');
        $('.dot').css('opacity', '0');
        $('#next').addClass('lighter')
        $('.category').addClass('ScaleUp');
});

Это CSS

.clickable {
    transform: scale(1);
    transition: all 1s;
}

#ScaleDown {
    transform: scale(0.33);
    transition: all 1s;
}

.lighter {
    font-weight: 400 !important;
}

.category {
    opacity: 0;
    transform: scale(0);
    transition: all 1s;
}

.ScaleUp {
     transform: scale(1);
     opacity: 1 !important;
}

Answer 1

Ваше правило должно выбрать тег h3

.lighter h3 {
  font-weight: 400 !important;
}

из-за этого существующего правила

body.elementor-page-300 h3, body.elementor-page-300 .elementor-widget-heading h3.elementor-heading-title, body.elementor-page-300 h3 a, body.elementor-page-300 .elementor-widget-heading h3.elementor-heading-title a {
    font-family: "PT Serif", Sans-serif;
    font-size: 3.5em;
    font-weight: 600;
    text-transform: none;
    line-height: 1em;
}

, которое уже стилизует тег h3.

Answer 2

Вам необходимо переопределить <h3> font-weight, поскольку он объявлен специально для этого тега в таблице стилей.

Если вы измените этот

.lighter {
    font-weight: 400 !important;
}

на этот

.lighter h3.elementor-heading-title {
    font-weight: 400 !important;
}

Answer 3

Для тегов h3 установлен атрибут font-weight.

Если вы нацелились на тег h3 в классе .lighter, вы можете переопределить примененный font-weight.

Попробуйте это:

.lighter h3 {
    font-weight: 400 !important;
}