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

2019年8月4日 125次阅读

我有随机的
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;}但是给这个样式会将子p的字体大小调整为0.8 * 0.8 = 0.64em.所以段落的字体大小可能会有所不同.

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

paragraphs may be in <p />, <div />, <span /> etc.

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

最佳答案 为根元素(< html>)设置基本字体大小,然后使用rem单位

div { 
   font-size: .8rem;
}

这将确保所有div元素具有相同的字体大小,即使它们是嵌套的(em会改为将字体大小相乘)

跨浏览器的rem支持：http://caniuse.com/rem

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

点赞