4

我将 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>

4

1 回答 1

5

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

从规范：

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

于 2018-11-08T18:59:18.173 回答