我尝试使用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/
通过后代切换课程
答案 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