CSS Inherit和em-units无法正确呈现

Question

我有一些HTML

<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

还有一些css

body {font-size:2em}
li {font-size:60%}
li:nth-child(2){font-size:inherit}

一切都很好

如果我用em单位替换li font-size ，继承会中断

body {font-size:2em}
li {font-size:1em}
li:nth-child(2){font-size:inherit}

亲爱的css之神可能会导致什么？

请点击此处，http://jsfiddle.net/3ho1uc3u/

Answer 1

在CSS中，如果你给出一个相对单位，它默认是相对于你继承的大小。 在你的情况下，如果你使用1em就像你设置font-size：100％。

li {font-size:0.6em}

＆＃13;

＆＃13;

body {font-size:2em}
li {font-size:0.6em}
li:nth-child(2){font-size:inherit}

＆＃13;

<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

  

EM的作用就像百分比一样，基本字体大小始终为1em   和.6em将是60％（与1.2em相同）   相当于基本字体大小的120％。

Answer 2

1em是继承字体大小的一个单位。

因此，如果您在正文上设置了2em，则1em继承的li实际上是2em，其大小为body在第一时间继承的（在您的情况下是浏览器的默认16px。）

body           {font-size:2em}
li             {font-size:1em}     /* will be 2em of the inherited size by body*/
li:nth-child(2){font-size:inherit} /* will be 2em of the inherited size by body*/

两种li类型都具有相同的字体大小。

第一个包含1个单位（或1em）的继承2em，第二个单位直接继承2em。