Question

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

下面是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属性？

Answer 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/。

Answer 2

您可以使用

* {
   font-size:25px;
}

在正文中设置它将不起作用，因为font-size通常不是可继承的attribue *。（font-color和font-family是）。但是你可以将你的div和其他东西设置为：

div {
   font-size:inherit;
}

然后它将采用直接父级的字体大小。

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

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

2 个答案: