标题标记的CSS字体大小继承

Question

我有一个包含多个H3标头标签的页面，并希望增加它们的字体大小。在Firebug中检查相关样式设置时，唯一的字体大小声明是针对周围的div元素设置为16px。但是，此16px字体大小设置已被否决，但在任何其他字体大小声明的任何地方都没有引用。标题元素的样式设置不包含字体大小声明。 谁能告诉我这里发生了什么？

Answer 1

浏览器将字体大小应用于标题元素，并在Firefox（以及Chrome和我假设其他人）中将其设置为em。它来自一个＆＃39;系统＆＃39;样式表。从Firebug检查员那里看到：

每个标题都设置了不同的字体大小：

• h1 - 2em
• h2 - 1.5em
• h3 - 1.17em
• h4 - 1em
• h5 - 0.83em
• h6 - 0.67em

请注意，要查看这些样式，您必须选择“显示用户代理”＆＃39;来自＆＃39;样式的CSS＆＃39;下拉：

所以，你有一个16px的父容器（事实上，这是浏览器默认的字体大小），所以1.17em的<h3>将是1.17 * 16 = 18.72px。

如果您在样式表中明确将<h3>设置为1em，则其大小与父级相同。

这个小提示显示每个标题都受到具有不同字体大小的父容器的影响：

<强> Fiddle

Answer 2

我无法完全理解你的问题，如果你在这里复制你的代码可能会更好。 但我总的来说你的代码对于div或H3元素应该是这样的。

<div class="classZ">some text</div>
<h3>some header</h3>

H3 {
     font-size: 18px;
}

div.classZ {
     font-size: 10px;
}