css 变量 - var 上的默认值未通过

问题描述

对于下面的代码，我得到了 2 个不同的输出。它应该给出相同的输出，因为 css 变量应该采用默认值。下面是我注释传递 span 值的代码，因为它在 var 声明中具有默认值。取消注释赋值行会给出不同的输出。正在寻找对正在发生的事情的解释。

这是带有注释代码的代码笔 - https://codepen.io/skandasoft/pen/MWjoMZe

这里是未注释的 - https://codepen.io/skandasoft/pen/VwKWJqd

带有 CSS 变量的 Bootstrappy 网格！

<body>
    <div class="grid">
        <div class="item">1</div>
        <div class="item" style="--span: 7">
            <div class="grid" style="--cols: 2">
                <div class="item">1</div>
                <div class="item">2</div>
            </div>
        </div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <style>
        .grid {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(var(--cols,10),minmax(0,1fr));
        }
        .item {
            /* --span: 1; */
            grid-column: span var(--span,1); /**-span has a default value of 1 **/
            background-color: yellow;
            padding:10px;
        }
    </style>
</body>

解决方法

发生这种情况是因为 .item 类比提供的继承 --span: 7 具有更高的特异性。请参阅下面的屏幕截图，将其覆盖。因此，如果您在这 2 个子元素（1 和 2）上设置 --span: 7，您将不再看到打开和关闭 --span: 1 值的区别。

据我所知，默认值设置正确。

自定义属性继承。

来自spec：

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

这意味着如果没有为给定元素的自定义属性设置值，则使用其父元素的值。

在这种情况下，父元素定义了自定义属性：--span:

<div class="item" style="--span: 7">

因此 --span 属性的值在所有子级上都是 7 - 除非在子级上明确定义了不同的值。

现在两个版本的代码区别很明显了。

在注释版本中，.item 类中的 var(--span,1) 由于继承而计算为 7

由于网格中只有 2 列，因此每个项目跨越整个网格宽度

在未注释的版本中（带有 --span: 1；在 .item 类中定义），.item 类中的 var(--span,1) 计算结果为 1 - 因为它明确定义在子对象上。

注意

后备值仅在给定的自定义属性无效/未定义时用作替代值

在本例中，外部网格中的第二项定义了 --span 自定义属性，其值为 7，并且可用于其所有子元素。

正如@Danield 所解释的，问题是继承，您可以通过使用 initial 来避免它，如下所示：

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--cols,10),minmax(0,1fr));
  --span:initial; /* this will stop the propagation of the variable */
}

.item {
  grid-column: span var(--span,1); /**-span has a default value of 1 **/
  background-color: yellow;
  padding: 10px;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item" style="--span: 7">
    <div class="grid" style="--cols: 2">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>
  </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

css 变量 - var 上的默认值未通过

问题描述

解决方法

注意

相关问答