为什么在 :root 定义的字体大小被用户代理样式表覆盖？如果它是有意的，那么该片段应该如何工作？

Question

我的理解是下面代码片段中的 CSS 是为了让 font-size 随着视口逐渐变化，这是实现响应式设计的一个可能的构建块：

:root {
  font-size: calc(.6em + 1vw);
}

<html lang="it">
  <body>
    <h1>Title</h1>
    text
  </body>
</html>

然而，devtools 告诉我 font-size: calc(.6em + 1vw); 被用户代理的以下规则集覆盖（并像这样显示：~~font-size: calc(.6em + 1vw);~~）样式表

h1 {
    font-size: 2em;
    /* and other stuff */
}

为什么会这样？

:root { font-size: calc(.6em + 1vw); } 规则集不是我的发明，所以它应该有用，我想我只是 misusing/misunderstanding 它。

我的理解是 :root 选择器与 html 选择器针对相同的对象，但具有 class 特异性而不是标签特异性。鉴于此，我希望用户代理样式表的 h1 {} 规则集无法覆盖它。

Answer 1

这是因为以下风格

:root { font-size: calc(.6em + 1vw); }

在 h1 的情况下，只是一个 继承的 样式。直接应用于元素的任何样式都将覆盖继承的样式，这正是用户代理对 h1 { font-size: 2em;}

所做的

如果想继承根样式，可以显式设置：

h1 {
   font-size: inherit; 
}

在这种情况下，您和用户代理都直接应用该样式，您的将获胜，因为它具有相同的特异性并且在另一个之后加载。
但是这种方法的问题是，如果 <body> 或任何最近的父级有一个明确的 font-size 它将继承它而不是 root.

在我看来，CSS 变量可以更好地处理整个情况。

:root {
  --font-size: calc(.6em + 1vw);
}

h1 {
  font-size: var(--font-size);
}

<html lang="it">

<body>
  <h1>Title</h1>
  text
</body>

</html>

Why font-size defined at :root is overriden by user agent stylesheet? If it's intended to be, then how is th snippet supposed to work?