是否可以使 em 单位相对于外部段落元素而不是它的直接父元素？覆盖级联？
在下面的示例中，单词 world的 font-size最终会变成 (1.5em x 1.2em x 1em) 大。
在保持相同的 html 结构的同时，我们能否以某种方式使它变大(1.5em x 1em)？
<p style="font-size:1em;">
<span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>. </span>
</p>
更新:
在我的例子中，只需使用 rem单位似乎是最好的。它被 IE 9+ 支持(除了 Chrome 4+、Firefox 3.6+、Opera 11.6+ 和 Safari 4.1+)
rem表示根元素的字体大小(通常为 <html> )。当在根元素 font-size 中使用时，它表示其初始值(常见的浏览器默认值为 16px，但用户定义的首选项可能会修改此值)。
https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem
:root选择文档的根元素:<html>在 HTML 的情况下
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
/* css */
:root {
font-size: 1em;
}
html:
<span style="font-size:1.2rem">
Hello <!-- this is 1.2em (relative to <html> root) -->
<span style="font-size:1.5rem">world.</span> <!-- this is nested but still only 1.5em (relative to <html> root) -->
</span>
也可以单独使用 em 单位，这可以通过 css calc() 解决。函数(IE 9+ 也支持)和一些 javascript。
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
感谢大家的回答和帮助!
最佳答案
也许 calc() 函数可以提供帮助:
<p style="font-size:1em;">
<span style="font-size:1.2em"> Hello
<span style="font-size:calc(1.5em * (1/1.2))">world</span>.
</span>
</p>
<code>What you have:</code>
<p style="font-size:1em;">
<span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>. </span>
</p>
<hr>
<code>What you want, by using calc() function:</code>
<p style="font-size:1em;">
<span style="font-size:1.2em"> Hello <span style="font-size:calc(1.5em * (1/1.2))">world</span>. </span>
</p>解释
这是您的代码:
<p style="font-size:1em;">
<span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>.</span>
</p>
假设 body 元素设置为 16px 并且是 p 元素的父元素。
由于 em 单位是相对于父级的，这意味着 p 的字体大小为 16px。
1em = 16px
因此，p 的子项(第一个 span)的字体大小为 19.2px。
1.2em * 16px = 19.2px
span 的子项(另一个 span)的字体大小为 28.8px。
1.5em * 19.2px = 28.8
您希望您的第二个 span 为 24px，即其祖父项 (16px) 的字体大小乘以 1.5。
所以这将是计算:
font-size: calc(1.5em * (1/1.2))
1em / 1.2em = .833em
1.5em * .833em = 1.25em
1.25em * 19.2px = 24px
关于javascript - 使 em 单位相对于不是父级的祖先，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46735236/