jQuery toggleClass 不更改已设置字体大小的后代选择器的字体大小

Question

我正在尝试使用 jQuery 单击事件来切换设置类来更改单个 div 下所有元素的字体大小。 div 下的段落使用已将其字体大小更改为小的后代选择器作为目标。当我将 jQuery 添加到主 div 的 toggleClass 时，只有标题会更改大小，而后代目标段落会保持其原始大小。有人可以向我解释这种行为并提供我可能没有使用的解决方法或最佳实践吗。

我已经尝试在 jQuery 中使用 decendent 选择器添加“size”类，尽管段落获得了“size”类，但它们的 font-size 仍然很小。

HTML

<div class="middle">
  <h1>Header test</h1>
  <p>Paragraph test</p>
</div>

CSS

.middle p { font-size: small; }
.size { font-size: 5em; }

添加类的jQuery

$('.middle').click(function () {
  $(this).toggleClass('size');
});

fiddle 来说明问题。

https://jsfiddle.net/e0gjLhsm/

摆弄由后代切换的等级

https://jsfiddle.net/2qorozg8/

Answer 1

是因为css specificity .对于 p 元素，规则 .middle p 比从父 .middle 元素继承属性更具体

.middle p {
    font-size: small;
}
.size {
    font-size: 5em;
}
.middle.size p {
    font-size: 5em;
}

然后

$('.middle').click(function () {
    $(this).toggleClass('size');
});

演示:Fiddle