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

时间:2015-03-06 07:08:37

标签: jquery html css

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

我已尝试添加"尺寸"在jQuery中使用decendent选择器的类,虽然段落得到了" 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/

1 个答案:

答案 0 :(得分:0)

这是因为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