Javascript 使em单位相对于不是父级的祖先_Javascript_Jquery_Css_Html

Javascript 使em单位相对于不是父级的祖先

javascript jquery css html

Javascript 使em单位相对于不是父级的祖先,javascript,jquery,css,html,Javascript,Jquery,Css,Html,是否可以使em单位相对于外部段落元素而不是它的直接父元素？覆盖级联在下面的示例中，单词world的font size最终将变大（1.5em x 1.2em x 1em）在保持相同的html结构的同时，我们是否可以以某种方式使其仅（1.5em x 1em）大 html: 你好世界。也可以单独使用em单元，这可以通过csscalc（）函数（IE 9+也支持该函数）和一些javascript来解决谢谢大家的回答和帮助也许calc（）函数可以帮助： <p style="font-

是否可以使em单位相对于外部段落元素而不是它的直接父元素？覆盖级联

在下面的示例中，单词

world

的

font size

最终将变大（1.5em x 1.2em x 1em）

在保持相同的html结构的同时，我们是否可以以某种方式使其仅（1.5em x 1em）大

html:


你好
世界。

也可以单独使用em单元，这可以通过css

calc（）

函数（IE 9+也支持该函数）和一些javascript来解决

谢谢大家的回答和帮助

也许

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>

否，em值是相对于父元素的，您必须基于当前上下文重新计算。使用js，您是否可以覆盖它认为的父元素？是否需要多个元素将相对的值？我希望P的子元素和孙子元素将相对P@Morty根元素是文档中的顶部元素。在使用HTML5的文档中，作为CSS选择器，这将是：

html

。特殊的伪类选择器是

，但它将比

html

具有更高的优先级，因为它的specify更高。这非常有趣，我不知道css calc（）函数。它似乎也得到了适当的支持。我不确定它是否会比我的项目的非嵌套版本复杂，但这是一个很好的答案。

/* css */
:root {
    font-size: 1em;
}

<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>

<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>