取消/删除自定义属性/CSS变量 [英] Unset/Delete a custom property/CSS variable

问题描述

以下面的示例为例:

.article, .note {
    color: var(--text-color, red);
 }
 .theme {
    --text-color: blue;
 }
 .theme .note {
     --text-color: unset;
 }

<section>
    <p class="article">Article</p>
    <p class="note">Note</p>
</section>
<section class="theme">
    <p class="article">Article</p>
    <p class="note">Note</p>
</section>

是否可以通过取消设置CSS变量使第二个"Note"再次变红色?

Is it possible to make the second "Note" red again by unsetting the CSS variable?

我知道我只能将CSS变量应用于.article，但是假设我有很多类似的元素要应用主题，但只有少数例外.这样，维护选择器将非常繁琐.

I know that I could apply the CSS variable only to .article but assume I have a lot of similar elements where I want the theme applied but only a few exemptions. Then maintaining the selector would be rather tedious.

我可以将主题选择器更改为.theme :not(.note)，但这不适用于嵌套在其他元素中的任何.note元素.

I could change the theme selector to .theme :not(.note) but that does not work on any .note elements nested in other elements.

推荐答案

您可以使用值initial，因为IE 不支持 CSS变量在此处使用initial并不是问题(也是IE 不支持)

You can use the value initial, since IE doesn't support CSS vars it is not an issue using initial here (also IE doesn't support it)

.article,
.note {
  color: var(--text-color, red);
}

.theme {
  --text-color: blue;
}

.theme .note {
  --text-color: initial;
}

<section>
  <p class="article">Article</p>
  <p class="note">Note</p>
</section>
<section class="theme">
  <p class="article">Article</p>
  <p class="note">Note</p>
</section>

这篇关于取消/删除自定义属性/CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！