Css display property set to inherit with variable doesn't work

问题

I set the display property for divs to in line-block. I then created four classes:

no-var, which sets display to inherit
var, which sets display to a variable set to inherit
var-none, which sets display to a variable set to none
var-default, which sets display to a variable set to inherit and a default of grid

The actual style that is used by each class doesn't seem to be correct, though:

The no-var class correctly inherits display to block
The var class doesn't get the inherit value from the variable and displays as inline-block
The var-none class correctly sets display to none and is hidden
The var-default class doesn't get the inherit value from the variable and sets display to the default

For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit and unset values?

: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>

回答1:

In such situation, inherit is used as a value for the custom property and will not be evaluted to the inherit value using var().

Here is a basic example to understand the issue:

.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>

Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.

In other words, inherit will be considered for the custom property and not for the property where you will evalute the custom property using var(). You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.

From the specification:

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

来源：https://stackoverflow.com/questions/53213870/css-display-property-set-to-inherit-with-variable-doesnt-work

标签

html

css

css3

css-variables