css - 为什么带有 important 的 em 中的字体大小不会覆盖 px 中的字体大小？

Question

首先要做的事 - 这是一个 fiddle ，所以你可以向下滚动代码: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 并不关心，因为它的字体大小是以像素为单位设置的。

Answer 1

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

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