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

我正在尝试使用jQuery click events切换集合类来更改单个div下所有元素的字体大小。div下的段落使用Decentant选择器来定位，该选择器将其字体大小更改为较小。当我为main div添加jQuery to toggleClass时，只有标题改变了大小，而decentant目标段落保持了原始大小。请有人向我解释一下这种行为，并提供一个我可能不喜欢的解决方法或最佳实践

我曾尝试在jQuery中使用Decent选择器添加size类，尽管段落获得了size类，但它们的字体大小仍然很小

HTML

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

用于添加类的jQuery

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

用小提琴来说明问题

摆弄由Decentant切换的类

这是因为。对于p元素，rule.middle p比从父.middle元素继承属性更具体

然后

演示：

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

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

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