为什么body标签上设置的font-size不会覆盖元素上设置的font-size？

Question

我在iframe中加载一个HTML页面，并尝试将iframe的正文的字体大小设置为27pt。但它不会将该字体应用于所有元素。

下面是DIV和它的CSS：

<div id="d10" class="fnt12 page2parttext">COLLECTION</div>

.fnt12 {
  font-size: 25px;
  font-family: MyriadPro-SemiExt;
  color: white;
}

我将这个CSS应用于页面的正文：

font-size: 40pt !important;

虽然在开发人员工具中，.fnt12的字体大小属性是删除线，但文本大小仍然是25px。我试着在Chrome Inpector中取消对font-size: 25px的复选框选择，它起作用了。

有什么问题吗？为什么它不覆盖现有的CSS属性？

Answer 1

您可以使用

* {
   font-size:25px;
}

在正文中设置它将不起作用，因为font-size通常没有可继承的属性*。(font-color和font-family是)。但您可以将div和其他内容设置为：

div {
   font-size:inherit;
}

然后，它将从它的直接父对象中获取字体大小。

*措辞不正确，请参阅此处了解更多信息：http://webdesign.about.com/od/advancedcss/a/aa073007.htm

Answer 2

这不起作用，因为您正在将规则应用于body元素。而您的字体设置将继承，如果您将字体设置直接应用于子元素，则通常会覆盖应用于父元素的字体设置。虽然!important声明确实会优先考虑它在正文中应用的样式，但重要性并不会降级到子级联中。这是一件好事，因为!important通常只用于对特定元素或元素集合进行微调。

有关具体的官方规范，请参阅http://www.w3.org/TR/CSS21/cascade.html。

这里有一篇关于这个主题的一般性文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。