CSS中添加1rem样式后h2字号变小但a标签不变的原因

给<a>标签添加包含font-size:1rem的.a类后，它保持了原本的30px字号（符合预期），但<h2>标签添加该类后字号却变小了，请问这是为什么？

代码示例 #

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Bellefair&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 30px;
}

.a {
  font-size: 1rem;
}

a {
  font-family: Assistant;
}

h2 {
  font-family: Bellefair;
}

HTML代码

<h2>some text</h2>
<a href="/">some text</a>

<h2 class="a">some text</h2>
<a class="a" href="/">some text</a>

原因解析 #

• 浏览器默认样式的差异：浏览器自带的默认样式表中，<h2>标签被设置了大于1em的字号（比如多数浏览器默认h2 { font-size: 1.5em; }），而<a>标签默认没有独立设置字号，会直接继承父元素的字号。
• rem与em的计算逻辑：
  • 你把html的字号设为了30px，未加类的<h2>会先继承body的30px（body默认继承html字号），再应用浏览器默认的1.5em，最终字号是30px * 1.5 = 45px左右。
  • 当给<h2>添加.a类后，font-size:1rem会直接覆盖浏览器的默认样式，1rem的大小等于html的字号（30px），比原来的45px小，所以视觉上字号变小。
  • 未加类的<a>继承父元素的30px字号，和.a类的1rem（30px）数值完全一致，所以加类后字号没有变化。

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