Unset/Löschen einer benutzerdefinierten Eigenschaft/CSS Variable

Question

Nehmen Sie das folgende Beispiel:

.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>

Ist es möglich, durch Lösen des CSS Variable die zweite "Note" wieder rot zu machen?

Ich weiß, dass ich die CSS-Variable nur auf .article anwenden könnte, aber nehme an, dass ich viele ähnliche Elemente habe, wo ich das Thema anwenden möchte, aber nur ein paar Ausnahmen. Dann wäre die Aufrechterhaltung des Selektors ziemlich mühsam.

Ich könnte die Themenauswahl zu .theme :not(.note) ändern, aber das funktioniert nicht auf .note Elemente verschachtelt in anderen Elementen.

Answer 1

können Sie verwenden, um den Wert initial, da IE doesn't Unterstützung CSS vars es ist nicht ein Problem mit initial hier (auch 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>