Unset/Delete 自定义 property/CSS 变量

Question

举个例子：

.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" 再次变红？

我知道我只能将 CSS 变量应用于 .article，但假设我有很多类似的元素，但只有少数例外。那么维护选择器就比较繁琐了。

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

Answer 1

您可以使用值 initial，因为 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>

Unset/Delete 自定义 property/CSS 变量

Unset/Delete a custom property/CSS variable

html

css

css-variables