内联子项的font-size不生效

Question

我可以正常设置span的字体大小。

当它大于h1的字体大小时，它确实有效：

<style>
h1 {
    font-size: 1em;
}

span {
    font-size: 2em;
}
</style>

<h1>Normal text, <span>bigger one</span></h1>

JSFiddle：http://jsfiddle.net/We9nu/

反向不起作用。我也试过“！important”：

<style>
h1 {
    font-size: 2em;
}

span {
    font-size: 1em;
}
</style>

<h1>Bigger text, <span>normal one</span></h1>

JSFiddle：http://jsfiddle.net/FGV5Z/1/

是否可以使用此HTML标记执行此操作？

我已经使用Firefox和Chromium进行了测试。

感谢。

Answer 1

在第二个例子中你需要做

h1   {  font-size: 2em; }
span {  font-size: .5em; // half of parent element }

如果你在子元素中设置1em，你实际上是在定义父元素的相同字体大小，因为ems正在相乘（2em * 1em仍然是2em，而{ {1}} 2em * 0.5em为结果字体大小）

请参阅this resource了解可用的字体单位及​​其工作原理

Answer 2

以像素为单位定义字体大小：

<style>
h1 {
   font-size: 12px;
}

span {
   font-size: 24px;
}

反向也有效。