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

Question

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

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

不过，每个类使用的实际样式似乎并不正确：

• no-var 类正确继承了 display 到block
• var 类不会inherit从变量中获取值并显示为inline-block
• var-none 类正确设置显示none并隐藏
• var-default 类不会inherit从变量中获取值并将显示设置为默认值

对于每个类，我添加了颜色属性的变量和默认值，它们都按预期工作。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被用作自定义属性的值，并且不会被评估为inherit使用 的值var()。

这是一个理解该问题的基本示例：

.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将考虑将其用于自定义属性，而不是您将使用 评估自定义属性的属性var()。您不会找到计算值等于继承值但计算值等于继承值的自定义属性。

从规格来看：

自定义属性是普通属性，因此可以在任何元素上声明它们，并使用正常的继承和级联规则进行解析