css在html里的作用域,用于计算外部作用域中的变量时，CSS作用域定制属性被忽略...

这很棘手，但在您的情况下，您已经--scale在根级别评估了自定义属性以定义--size-*属性，然后您--scale 再次定义了内部子元素。这不会再次触发评估，因为它已经在较高级别完成。

这是一个简单的例子来说明这个问题：.box {

--color: var(--c, blue);}span {

color: var(--color);}

I will not be red because the property is already evaluated and --color is set to blue using the default value

I will be red because at the time of the evaluation --c is red (inherited from the upper div)

要解决您的问题，您需要将声明从定义移至:root相同级别--scale：.scale {

--size-1: calc(1 * var(--scale, 1) * 1rem);

--size-2: calc(2 * var(--scale, 1) * 1rem);

--size-3: calc(3 * var(--scale, 1) * 1rem);}.size-1 { font-size: var(--size-1) }.size-2 { font-size: var(--size-2) }.size-3 { font-size: var(--size-3) }.scale-1x { --scale: 1 }.scale-2x { --scale: 2 }.scale-3x { --scale: 3 }html {

font: 1em sans-serif;

background: papayawhip;}ol {

float: left;

list-style: none;

margin: 1rem;}

1. size 1
2. size 2
3. size 3

1. size 1
2. size 2
3. size 3

1. size 1
2. size 2
3. size 3

在这种情况下，--scale定义在与其评估相同的级别，因此--size-*将针对每种情况正确定义。

从规格：要在属性值中替换var()：如果var()函数的第一个参数指定的自定义属性是动画污染的，并且var()函数正在动画属性或其中一个长整数中使用，请将自定义属性视为具有其初始值。其余的这个算法。

如果var()函数的第一个参数指定的自定义属性的值不是初始值，则将var()函数替换为相应自定义属性的值。除此以外，

如果var()函数的回退值作为其第二个参数，则用回退值替换var()函数。如果后备中有任何var()引用，也可以替换它们。

否则，包含var()函数的属性在计算值时间无效

在您的第一种情况下，您将落入3，因为--scale在根级别没有指定值。在最后一种情况下，我们将陷入2，因为我们--scale在同一级别定义并且我们有其价值。

在所有情况下，我们应该避免任何:root级别的评估，因为它根本没用。根级别是DOM中的最高级别，因此所有元素都将继承相同的值，除非我们再次评估变量，否则不可能在DOM内部具有不同的值。

您的代码与此代码相同：:root {

--size-1: calc(1 * 1 * 1rem);

--size-2: calc(2 * 1 * 1rem);

--size-3: calc(3 * 1 * 1rem);}

让我们再看一个例子：:root {

--r:0;

--g:0;

--b:255;

--color:rgb(var(--r),var(--g),var(--b))}div {

color:var(--color);}p {

--g:100;

color:var(--color);}

some text

some text

直觉上，我们可能认为我们可以--color通过改变在:root级别定义的3个变量之一来改变它，但我们不能这样做，上面的代码与这个相同：:root {

--color:rgb(0,0,255)}div {

color:var(--color);}p {

--g:100;

color:var(--color);}

some text

some text

该3个变量(--r，--g，--b)进行评估里面:root，所以我们已经与他们的价值观取代他们。

在这种情况下，我们有两种可能性：更改:root使用JS或其他CSS规则中的变量。这不允许我们有不同的颜色：:root {

--r:0;

--g:0;

--b:255;

--color:rgb(var(--r),var(--g),var(--b))}div {

color:var(--color);}p {

--g:200; /*this will not have any effect !*/

color:var(--color);}:root {

--g:200; /*this will work*/}

some text

some text

在所需元素内再次评估变量。在这种情况下，我们将失去任何灵活性，内部的定义:root将变得无用(或至少将成为默认值)：:root {

--r:0;

--g:0;

--b:255;

--color:rgb(var(--r),var(--g),var(--b))}div {

color:var(--color);}p {

--g:200;

--color:rgb(var(--r),var(--g),var(--b));

color:var(--color);}

some text

some text

考虑到这一点，我们应该始终将评估保持在DOM树中的最低点，尤其是在变量发生变化之后(或者在同一级别)

这是我们不应该做的:root {

--r: 0;

--g: 0;

--b: 0;}.color {

--color: rgb(var(--r), var(--g), var(--b))}.green {

--g: 255;}.red {

--r: 255;}p {

color: var(--color);}h1 {

border-bottom: 1px solid var(--color);}

Red 

I want to be red :(

Green 

I want to be green :(

这是我们应该做的:root {

--r:0;

--g:0;

--b:0;}.color {

--color:rgb(var(--r),var(--g),var(--b));}.green {

--g:255;}.red {

--r:255;}p {

color:var(--color);}h1 {

border-bottom: 1px solid var(--color);}

Red title

Yes I am red :D

Green title

Yes I am green :D

我们也可以这样做：:root {

--r:0;

--g:0;

--b:0;}.color {

--color:rgb(var(--r),var(--g),var(--b));}.green {

--g:255;}.red {

--r:255;}p {

color:var(--color);}h1 {

border-bottom: 1px solid var(--color);}

Red title

Yes I am red :D

Green title

Yes I am green :D