为div设置font-size后内部h1字体大小未继承设置值的原因

该现象由CSS优先级规则和浏览器默认样式共同导致：

• 浏览器加载页面时，会首先内置一套**用户代理样式表（User Agent Stylesheet）**给原生HTML标签设置默认样式，元素自身的默认样式优先级高于从父元素继承的样式。
• p、a这类普通行内/块级文本标签，默认没有设置独立的font-size固定值，会自动继承父元素的字号属性，因此会直接应用你给div设置的50px字号。
• h1~h6标题标签在默认样式中被预设了基于em单位的相对字号，桌面端浏览器普遍给h1设置的默认字号为2em。em单位的计算规则是：以当前元素从父级继承到的字号为基准乘以系数，因此父div字号为50px时，h1的实际渲染字号为50px * 2 = 100px，自然比div设置的50px更大。

复现代码 #

CSS 样式 #

div {
  font-size: 50px;
}

HTML 结构 #

<div>
  <h1 class="titolo">Prova tag h1</h1>
  <p>Prova paragrafo</p>
  <a href="https:www.google.it">clicca per il link</a>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>

调整方案 #

如果需要h1和p一样继承父div的字号，只需要给h1添加如下样式，强制覆盖默认的字号设置即可：

h1 {
  font-size: inherit;
}

内容的提问来源于stack exchange，提问作者AQ95