为什么重要的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改变了字体大小，因为基于em，它从父节点获取，而不是因为它的字体大小被.flex规则修改。而且child-px并不在意，因为它的font-size是以像素为单位设置的。

Answer 1

那是因为你给了.child-px自己的字体大小。仅这一点足以防止.flex的字体大小被继承。

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

Answer 2

此答案基于您的posted fiddle：

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

---

首先，我应该注意px是一个与em不同的absolute unit，与父的字体大小无关。所以这将是不变的。

在您提供的演示中，您将获得font-size的{​​{1}}的值是像素因为jQuery .child-em方法返回计算出的样式元件。

来自 jQuery doc ：

  

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

在这种特殊情况下，您已通过.css( propertyName )类名将父级的字体大小更改为默认的50%（在大多数Web浏览器中为16px），然后通过.flex再次为.child-em元素加倍该值。

因此返回的值为2em。