为什么chrome devtools在其他元素中也设置了字体大小,而在:root中却显示了删除的字体大小?

这是我设置的片段 font-size 到28像素 :root 规则集( 顺便问一下,这是我应该避免的吗?我应该设定吗 字体大小 在…上 body 还是别的地方? 看见 this )

:root {
    font-size: 28px;
}
.fourteen {
    font-size: 14px;
}
.onerem {
    font-size: 1rem;
}

<div class="outer">
  <div class="onerem">
    Ciao
  </div>
  <div class="fourteen">
    Ciao
  </div>
</div>

一方面,在查看页面时,我看到 onerem 课堂上有一个 字体大小 28像素,这证明了 font-size: 28px; 一切就绪。

另一方面,我也从CSS的角度来看, font-size: 1rem; 正在扔掉 :根 是的 字体大小:28px; .的确,如果我改变 :根 到 .outer 然后两者 Ciao s为14像素(假设浏览器的默认值为14像素)。

那么真相在哪里呢?

可能 this answer is relevant ,但我还有一个问题:Chrome开发工具显示 字体大小:28px; 被其他规则覆盖(见下图);但如果真的是。。。它会如何影响 1rem ?