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

nxagd54h 于 2023-02-20 发布在其他

关注(0)|答案(2)|浏览(163)

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

无变量，将显示设置为inherit
var，它将display设置为变量集inherit
var-none，用于将显示设置为变量集none
var-default，将显示设置为变量集inherit和默认值grid

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

no-var类正确地将显示继承到block
var类不从变量获取inherit值，而是显示为inline-block
var-none类正确地将display设置为none，并且处于隐藏状态
var-default类不从变量获取inherit值，并将display设置为缺省值

对于每个类，我都为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>

css

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

2条答案

按热度按时间

3pmvbmvn1#

在这种情况下，inherit用作自定义特性的值，并且不会使用var()计算为inherit值。
下面是一个基本的例子来理解这个问题：

.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()计算自定义属性的属性。您将找不到计算值等于的自定义属性来继承，但计算值等于的自定义属性将继承值。
根据质量标准：
自定义属性是普通属性，因此它们可以在任何元素上声明，使用正常继承和级联规则解析

赞(0）回复(0）举报 2023-02-20

voj3qocg2#

有时您需要使用“上下文感知”的属性值，例如auto、100%或1em。
例如，现在（这是针对Angular 材质样式的，所以我不能控制所有CSS），我需要设置一个对应于font-size的变量，以防止使用默认的var（）值。
因此，在font-size的上下文中：100%或1em实际上意味着与inherit相同。
所以材质样式（我不能改变）可能如下所示（我想防止使用默认的18px）：

font-size: var(--mat-body-font-size, 18px)

正如Temani所说我不能这么做

.parent-element
{
    font-size: 28px;  
    --mat-button-font-size: inherit;
}

相反，我可以使用行为类似于“inherit”的自定义属性值，但这只是因为我使用的是font-size。

.parent-element
{
    font-size: 28px;  
    --mat-button-font-size: 100%;
}

所以font-size: 100%代替18px被应用，并且实际上什么也不做，继承我先前在父对象中设置的字体大小。
另一个示例可能是--color: currentColor，表示属性为color。

赞(0）回复(0）举报 2023-02-20

我来回答

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

2条答案

相关问题

热门标签

最新问答