为什么 em 中的字体大小与重要不会覆盖 px 中的字体大小？

Question

首先-这里是一个小提琴，所以您可以向下滚动代码:http://jsfiddle.net/Usurer/f5E7R/4/

我有一个简单的结构:

<div class='parent flex'>
    <div class='child-px'>
        abc
    </div>
    <div class='child-em'>
        abc
    </div>
</div>

.flex { 
    font-size: .5em !important;
}
.parent {
    font-size: 1.5em;
}
.child-px {
    font-size: 20px;
}
.child-em {
    font-size: 2em;
}

我的问题是。flex不覆盖。child-px。但是为什么呢?为什么?(我使用Chrome v.33，如果它的关系)

---------------------------------

现在我得到了它- child-em已经改变了font-size，因为，是基于em的，它从父，而不是因为它的font-size被。flex规则修改。而child-px并不在意因为它的font-size是以像素为单位设置的

Answer 1

这是因为您已经为.child-px指定了自己的字体大小。这就足以防止.flex的字体大小被继承。

即使你有!important对.flex，重要性只适用于该元素。它不会影响任何其他元素，特别是它不会强制后代从它继承值，而不是使用自己指定的值。

Answer 2

这个答案是基于你张贴的小提琴:

.flex { 
    font-size: 50% !important;
}

---

首先，我应该注意到px是一个绝对单位，与em不同，它与父元素的字体大小无关。所以它是常数

在您提供的演示中，您将获得.child-em的font-size的值是像素，因为jQuery .css()方法返回元素的计算样式。

从jQuery doc:

.css( propertyName )
集合中第一个元素的计算样式属性匹配的元素。

在这个特殊的情况下，你已经通过.flex类名将父元素的字体大小更改为默认的50%(在大多数web浏览器中是16px)，然后为.child-em元素再次将该值加倍2em。

返回值为16px