jquery - 字体粗细!元素标识中重要的部分被覆盖

Question

我有一个动画部分 at the very bottom of this page当您单击“下一个类别”DIV 容器时，它会按预期工作，只是文本的 font-weight 不会更改...

我知道，即使使用 !important，子元素的样式也总是会覆盖父样式，但我的 JQuery 直接为该文本提供了一个具有 font-weight: 400 的类!重要，以及同一网站中具有 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 标签的样式。