Question

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

我已尝试添加＆＃34;尺寸＆＃34;在jQuery中使用decendent选择器的类，虽然段落得到了＆＃34; size＆＃34;他们的字体大小仍然很小。

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/

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

jQuery toggleClass不改变设置了字体大小的decedant选择器的字体大小

1 个答案: