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

Question

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

• no-var，将显示设置为inherit
• var，将 display 设置为设置为的变量inherit
• var-none，将 display 设置为设置为的变量none
• var-default，将 display 设置为设置为的变量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>

标签： htmlcsscss-variables

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()。您将找不到计算值等于继承但计算值等于继承值的自定义属性。

---

从规范：

自定义属性是普通属性，因此可以在任何元素上声明，通过普通继承和级联规则解析