为什么 body 标签上设置的字体大小不会覆盖元素上的字体大小？答案

【问题标题】：Why does font-size set on body tag not overwrite the one set on an element?为什么 body 标签上设置的字体大小不会覆盖元素上的字体大小？
【发布时间】：2012-12-13 16:05:45
【问题描述】：

我正在 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 的 font-size 属性是删除线，但文本大小仍然是 25px 大小。我试图在 Chrome Inpector 中取消选中 font-size: 25px 的复选框并且它有效。

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

【问题讨论】：

"为什么它不覆盖现有的 CSS 属性？" -- 因为它们针对不同的元素，也许？

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可以使用

* {
   font-size:25px;
}

在正文中设置它是行不通的，因为字体大小通常不是可继承的属性*。（字体颜色和字体系列是）。但是您可以将 div 和其他内容设置为：

div {
   font-size:inherit;
}

然后它将从它的 direct 父级中获取字体大小。

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

【讨论】：

是什么让你认为font-size默认不被继承？
px 的要点是 if 您以像素为单位设置大小 then 父级的大小不再重要。这是完全可以预料的。
请注意，您建议的规则很可能是最不具体的规则，并且完全被忽略。
是的，它是最不具体的一个。根据 tc 将实现的目标，它可能毫无价值。然而，字体大小是通过使用计算值继承的（默认情况下）。也可以在这里查看：webdesign.about.com/od/advancedcss/a/aa073007.htm 这是继承，是的 - 但不是人们所期望的那样。