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

Question

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

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

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

• no-var类正确地将显示继承到block
• var类没有从变量中获取inherit的值，并显示为inline-block
• var-none类正确地将显示设置为none并被隐藏
• var-default类没有从变量获取inherit值，而是将显示设置为默认值

对于每个这些类，我为color属性添加了变量和默认值，它们均按预期工作。变量是否应该忽略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()评估自定义属性的属性。您将找不到计算值等于继承的自定义属性，但计算值等于继承的值的自定义属性。

---

来自the specification：

  

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