Question

让我们考虑这个简化的示例以说明问题：

:root {
  --color:rgba(20,20,20,0.5); /*defined as the default value*/
}

.box {
  width:50px;
  height:50px;
  display:inline-block;
  margin-right:30px;
  border-radius:50%;
  position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,255,0,0.5);}

.box:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  transform:translateX(30px);
  background:var(--color);
  filter:invert(1);
}

<!-- we can add any color we want -->
<div class="box red" style="--color:rgba(0,255,0,0.5);">
</div>
<div class="box blue" style="--color:rgba(0,255,255,0.5);">
</div>

<!-- we can add the same color but this won't be dynamic -->
<div class="box red" style="--color:rgba(255,0,0,0.5);">
</div>

<!-- it would be good to be able to inherit the value but this won't work -->
<div class="box red" style="--color:inherit;">
</div>

在上面的代码中，我们能够使用CSS变量来操纵伪元素的background。在某些情况下，我们需要与主要元素具有相同的颜色，但是由于我们不知道使用哪种颜色，因此我们无法手动进行设置，最好的方法应该是使用inherit值。

如此处的说明：Css display property set to inherit with variable doesn't work，无法使用inherit。

是否有任何方法可以将inherit值存储在CSS变量中，并稍后在任何属性（在我们的示例中为background）中使用它？

Answer 1

^{以下内容似乎只能在Chrome上正常工作}

在这种情况下，我们可以考虑CSS变量的后备值。就像the specification中所述，我们可以这样写：

background:var(--color,inherit)

这样做，我们告诉我们的属性（background）使用inherit，以防未定义--color。

这可能可以解决问题，但在我们的情况下，这还不够，因为--color始终在:root级别上定义了initial并将被继承^{1 < / sup>，因此我们将永远不会使用后备值。}

要解决此问题，我们可以考虑使用:root { --color:rgba(25,25,25,0.5); /*defined as the default value*/ } .box { width:50px; height:50px; display:inline-block; margin-right:30px; border-radius:50%; position:relative; } .red {background:rgba(255,0,0,0.5);} .blue {background:rgba(0,0,255,0.5);} .box:before{ content:""; position:absolute; top:0;left:0;right:0;bottom:0; border-radius:50%; transform:translateX(30px); background:var(--color,inherit); filter:invert(1); }值，以取消定义自定义属性并强制使用后备值。如the specification中所述：

自定义属性的初始值是空值；也就是说，什么都没有。此初始值与var（）表示法具有特殊的交互作用，这在定义var（）的部分中进行了说明。

和

要 用属性值替换var（） ：


如果自定义属性由var（）的第一个参数命名   函数是动画污染的，并且var（）函数正在   动画属性或其惯用手之一，请对待自定义   属性具有该算法其余部分的初始值。

如果由第一个参数命名的自定义属性的值   var（）函数除了初始值以外的任何东西，请替换var（）   通过相应的自定义属性的值来实现功能。否则，

如果var（）函数具有后备值作为其第二个参数，   用后备值替换var（）函数。如果有的话   备用中的var（）引用，也请替换它们。

否则，包含var（）函数的属性在   计算值时间

我们的代码将如下所示：

<div class="box red" style="--color:initial;">
</div>
<div class="box blue" style="--color:initial;">
</div>

<div class="box" style="background:grey;--color:initial;">
</div>

initial

我们只需要将inherit设置为自定义属性，即可将background用作initial中的值。

使用:root { --color: blue; } .container div{ border:5px solid var(--color,red); padding:5px; } .stop { --color:initial; } .green { --color:green; }可以在特定级别停止CSS变量的传播，因为默认情况下它是所有元素继承的。

这里是一个例子：

<div class="container">
  <div> 
    <div>
      <div class="stop"> <!-- we stop at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container stop"> <!-- we stop at this level -->
  <div> 
    <div>
      <div class="green">  <!-- we redefine at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

http://localhost:4200

^{1：这是关于自定义属性的继承，而不是背景属性}

如何在CSS自定义属性（又称为CSS变量）中存储继承值？

1 个答案: