jQuery toggleClass 不会更改设置了字体大小的死者选择器的字体大小答案

【问题标题】：jQuery toggleClass not changing font-size for decedant selector with font-size setjQuery toggleClass 不会更改设置了字体大小的死者选择器的字体大小
【发布时间】：2015-03-06 07:08:36
【问题描述】：

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

我尝试在 jQuery 中使用 decendent 选择器添加“size”类，尽管段落获得了“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');
});

用小提琴来说明问题。

https://jsfiddle.net/e0gjLhsm/

拨弄由后代切换的类

https://jsfiddle.net/2qorozg8/

【问题讨论】：

标签： jquery html css

【解决方案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

【讨论】：