Question

我有下面的随机HTML：

<article>
    <div>
        <p></p>
        <p></p>
        <div>
            <p></p>
            <p><span></span></p>
        </div>
    </div>
    <div></div>
    <span></span>
</article>

可能有<section />等标记。现在我想将font-size应用于 .8em 作为段落。

所以我可以使用p{font-size: .8em;}但是如果没有<p />标记，那么div我会使用div{font-size: .8em;}但是这个样式会调整font-size的大小小孩p到0.8*0.8=0.64em。所以段落的字体大小可能会有所不同。

因此，如何将所有段落font-size static设置为.8em？

段落可能在<p />, <div />, <span />等。

请注意：p的字体大小设置为我不会修改的！

Answer 1

为根元素（font-size）设置基础<html>，然后使用rem单位

div { 
   font-size: .8rem;
}

这将确保所有div元素具有相同的字体大小，即使它们是嵌套的（em也会乘以字体大小）

跨浏览器的

rem支持：http://caniuse.com/rem

编辑：我已将样式应用于所有div元素，当然如果需要，可将样式应用于段落

Answer 2

您可以像这样重置孩子的font-size：

<强> FIDDLE

CSS：

div{font-size:.8em;}
p{font-size:.8em;}
div > p,div > div{font-size:1em;}

修改

如果您有任何嵌套或子项标记，您可以这样做：（我虽然建议您使用上面的解决方案，为您提出的每个案例指定字体大小）

<强> FIDDLE

CSS：

*{ font-size:0.8em; } *>*{ font-size:1em; }

Answer 3

如果使用jQuery，则可以使用蛮力

$('article').find('*').css('font-size', '1em')

如果您想考虑段落仅在<p>, <div>, <span>内，则可以过滤

$('article').find('p, div, span').css('font-size', '1em')

如何设置所有子项字体大小？

3 个答案: