8

将自定义属性设置为 的值与inherit您对其他所有 CSS 属性的期望完全一样：它继承其父级的相同属性值。

正常的属性继承：

<style>
  figure {
    border: 1px solid red;
  }
  figure > figcaption {
    border: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has the same border
    as its parent because it is inherited</figcaption>
</figure>

自定义属性继承（显式）：

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    --foobar: inherit;
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it explicitly inherits --foobar</figcaption>
</figure>

自定义属性继承（隐式）：

border默认情况下继承所有自定义属性（与 不同）

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it implicitly inherits --foobar</figcaption>
</figure>

我的问题

当您希望其值实际计算到关键字时，如何将其设置为自定义属性的文字值？inheritinherit

<style>
  figure {
    border: 1px solid red;
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
  figure > figcaption:hover {
    --foobar: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>I want this figcaption
    to have a red border (inherited from figure)
    but its border is green!</figcaption>
</figure>

在此示例中，我希望第二个figcaption（悬停时）继承其父级的红色边框，因此我设置--foobar为inherit. 但是，如示例 2 所示，这不会计算为，而是计算为从父属性（如果有的话）inherit继承的值，在本例中为绿色。--foobar

我完全理解 CSS 作者为什么这样设计它：--foobar就像任何其他 CSS 属性一样，所以设置inherit应该继承它的值。所以我想我在问是否有一种解决方法可以让第二个figcaption继承其父级的边界。

注意，我考虑过

figure > figcaption:hover {
  border: inherit;
}

但这违背了使用 CSS 变量的目的。

如果有许多其他属性figure > figcaption都使用 value var(--foobar)，我不想为悬停场景重新定义它们。我宁愿只设置一次这些属性，然后根据上下文重新分配变量。

4

1 回答 1

-1

我做了一些思考，这个解决方案正好打动了我。我可以将自定义属性与预处理器 mixins结合使用。

<style type="text/less">
  // NOTE: not syntactically valid CSS!
  .mx-border(@arg) {
    border: @arg;
  }
  figure {
    .mx-border(1px solid red);
    --foobar: 1px solid green;
  }
  figure > figcaption {
    .mx-border(var(--foobar));
  }
  figure > figcaption:hover {
    .mx-border(inherit);
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>This figcaption
    has a red border because the mixin
   sets the `border` property to `inherit`.</figcaption>
</figure>

这样，我可以将所有依赖的样式封装到.mx-border()mixin 中。这样做并没有利用 CSS 自定义属性，但它确实减轻了为:hover.

本质上它与write相同border: inherit;，增加了将更多样式放入 mixin 的能力，而不必复制它们。

于 2016-10-07T00:54:36.033 回答