为什么 css 变量会覆盖另一个文件的 css 变量？

当我在各种 CSS 文件中定义变量并将这些文件包含在 HTML 文件中时，它会覆盖以前的变量。 为什么会发生这种情况？

假设我有

测试1.css

:root {
    --size-of-font: 5rem;
 }
.logo{
    font-size: var(--size-of-font);
}

测试2.css

:root {
--size-of-font: 1.2rem;
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

测试.html

<link rel="stylesheet" href="test1.css">
  <link rel="stylesheet" href="test2.css">

<div class="outer">
    <h1 class="logo">Lorem Ipsum</h1>
     <p>Neque porro quisquam est qui dolorem 
          ipsum quia..."<br>
          "There is no one who loves pain 
          itself..."
     </p>
</div>

CSS = 级联样式表...这意味着定义的顺序很重要，最新的和更具体的优先。 如果您在 html 中切换 test1 和 test2，您会得到不同的结果，因为该变量被定义为更新的值。

如果您要求不同的 .css 文件不共享此值，我建议您为不同的 .css 文件使用不同的变量名称。