为什么显示属性设置为继承 CSS 变量不起作用？

Question

我将 div 的显示属性设置为 in line-block。然后我创建了四个 classes:

no-var，将显示设置为 inherit
var，将显示设置为设置为 inherit
var-none，它将显示设置为设置为 none
var-default，将显示设置为设置为 inherit 且默认值为 grid

每个 class 使用的实际样式似乎不正确，但是：

no-var class 正确继承显示 block
var class 没有从变量中获取 inherit 值并显示为 inline-block
var-none class 正确地将显示设置为 none 并隐藏
var-default class 未从变量中获取 inherit 值并将显示设置为默认值

对于这些 class 中的每一个，我都为颜色属性添加了变量和默认值，它们都按预期工作。变量是否应该忽略 inherit 和 unset 值？

:root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid);
  color: var(--color, purple);
}

<div class="no-var">
  No variable
</div>
<div class="no-var">
  No variable
</div>
<div class="var">
  Variable
</div>
<div class="var">
  Variable
</div>
<div class="var-none">
  None
</div>
<div class="var-none">
  None
</div>
<div class="var-default">
  Default
</div>
<div class="var-default">
  Default
</div>

Answer 1

在这种情况下，inherit 用作自定义属性的值，不会使用 var().[=20 计算为 inherit 值=]

这里有一个基本的例子来理解这个问题：

.box {
  --c:inherit;
  color:var(--c,red);
}

<div>
  <div class="box">I am a text</div>
</div>
<div style="--c:blue">
  <div class="box">I am a text</div>
</div>

请注意，在第二种情况下，我们是如何使用蓝色的，因为自定义属性从顶部 div 继承了这个值，然后它被评估为该值。在第一种情况下，我们将使用默认颜色，因为没有任何东西可以继承。

换句话说，inherit 将被视为自定义属性而不是属性，您将使用 [=14= 评估自定义属性 ].您不会找到计算值等于继承但计算值等于 继承值 的自定义属性。 =20=]

来自the specification：

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules

为什么显示属性设置为继承 CSS 变量不起作用？

Why display property set to inherit with CSS variable doesn't work?

html

css

css-variables

为什么显示 属性 设置为继承 CSS 变量不起作用？

Why display property set to inherit with CSS variable doesn't work?

html

css

css-variables

为什么显示属性设置为继承 CSS 变量不起作用？