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

当我在各种CSS文件中定义一个变量，并将这些文件包含在HTML文件中时，它会覆盖前面的变量。 为什么会这样

假设我有

test1.css

test2.css

test.html

CSS=层叠样式表。。。这意味着定义的顺序很重要，以最新和更具体的定义为准。 如果在html中切换test1和test2，则会得到不同的结果，因为变量定义为较新的值

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

css=Cascading样式表。。。这意味着定义的顺序很重要，以最新和更具体的定义为准。 如果在html中切换test1和test2，则会得到不同的结果，因为变量定义为较新的值

---

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

当您包括两个样式表时，它们的所有规则都会合并到一个样式表中。这意味着您在两个具有相同自定义属性声明的根CSS规则中引入了冲突：

:root {
  --size-of-font: 5rem;
}

:root {
  --size-of-font: 1.2rem;
}

级联解析意味着字体自定义属性-size的指定值为1.2rem，而不是5rem。简单地说，第二个声明将覆盖第一个声明，因为两个规则都有相同的选择器

---

该值1.2rem随后应用于字体大小变量in.logo和.outer的两种用法，这也是因为两个样式表组合形成一个。logo不仅可以在自己的样式表中看到字体的大小；它查看级联解析的任何内容，并考虑所有声明。

当您包括两个样式表时，它们的所有规则都合并到一个样式表中。这意味着您在两个具有相同自定义属性声明的根CSS规则中引入了冲突：

:root {
  --size-of-font: 5rem;
}

:root {
  --size-of-font: 1.2rem;
}

级联解析意味着字体自定义属性-size的指定值为1.2rem，而不是5rem。简单地说，第二个声明将覆盖第一个声明，因为两个规则都有相同的选择器

---

该值1.2rem随后应用于字体大小变量in.logo和.outer的两种用法，这也是因为两个样式表组合形成一个。logo不仅可以在自己的样式表中看到字体的大小；它看到了级联所解决的所有问题，考虑到所有的声明。

< P>这里，我们需要考虑两件事：自定义属性如何工作以及如何使用Val.<／P>进行评估。 第一部分很简单，因为自定义属性的行为与任何其他属性相同。从中我们可以看到： 自定义属性是普通属性，因此它们可以在任何元素上声明，可以使用普通继承和级联规则解析，可以使用@media和其他条件规则设置条件，可以在HTML的样式属性中使用，可以使用CSSOM读取或设置，等等

考虑到这一点，案例中定义的最后一个自定义特性将覆盖第一个：

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

:root {
  --size-of-font: 1.2rem; /* This one will win !*/
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

当使用var时，我们还需要考虑一些在同一规范中定义的规则： 要在属性值中替换var，请执行以下操作：

如果由变量的第一个参数命名的自定义属性 函数被动画污染，并且var函数正在中使用 动画属性或它的一个长柄处理自定义 属性设置为具有此算法其余部分的初始值。 如果由第一个参数命名的自定义属性的值 var函数不是初始值，替换var 函数由相应的自定义属性的值执行。否则 如果var函数的第二个参数是回退值， 用回退值替换var函数。如果有的话 回退中的var引用，也替换它们。 否则，包含var函数的属性在处无效 计算值时间

在我们的情况下，我们将考虑2，因为LOGO将继承定义的自定义属性：根，其值1.2Rem不是初始值。

换句话说，对自定义属性的评估不考虑CSS文件中出现的顺序。它考虑作为普通属性解析的自定义属性的值

---

这里还有一个有用的问题，你可以得到更多的细节和更多的例子：

这里，我们需要考虑两件事：自定义属性如何工作以及如何使用Val.< /P>来评估它们。 第一部分很简单，因为自定义属性的行为与任何其他属性相同。从中我们可以看到： 自定义属性是普通属性，所以它们可以在任何元素上声明，可以用普通继承和级联规则解析，可以用@media和其他条件规则设置条件，可以用在HTML的style属性中，可以是 使用CSSOM等进行ead或set

考虑到这一点，案例中定义的最后一个自定义特性将覆盖第一个：

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

:root {
  --size-of-font: 1.2rem; /* This one will win !*/
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

当使用var时，我们还需要考虑一些在同一规范中定义的规则： 要在属性值中替换var，请执行以下操作：

如果由变量的第一个参数命名的自定义属性 函数被动画污染，并且var函数正在中使用 动画属性或它的一个长柄处理自定义 属性设置为具有此算法其余部分的初始值。 如果由第一个参数命名的自定义属性的值 var函数不是初始值，替换var 函数由相应的自定义属性的值执行。否则 如果var函数的第二个参数是回退值， 用回退值替换var函数。如果有的话 回退中的var引用，也替换它们。 否则，包含var函数的属性在处无效 计算值时间

在我们的情况下，我们将考虑2，因为LOGO将继承定义的自定义属性：根，其值1.2Rem不是初始值。

换句话说，对自定义属性的评估不考虑CSS文件中出现的顺序。它考虑作为普通属性解析的自定义属性的值

---

下面是另一个有用的问题，您可以从中获得更多详细信息和示例：

有3种方法可以在css文件、标记或html标记中为网站创建css。CSS文件将始终优先于任何其他CSS格式。标记仅优先于html中的css标记，后者位于底部

这是一个视频

CSS文件是第一位的