Wie speichert man geerbte Werte in CSS-Variablen?

Geerbten Wert in CSS-Variablen speichern

In CSS stoßen wir häufig auf die Notwendigkeit, Eigenschaften basierend auf dem geerbten Wert zu manipulieren, beispielsweise die Hintergrundfarbe eines Elements zu erben für seine Pseudoelemente. Allerdings funktioniert die Verwendung des Schlüsselworts inherit in einer CSS-Variablen nicht immer wie erwartet.

Das Problem

Betrachten Sie dieses vereinfachte Beispiel:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

In diesem Szenario Wir fügen dem .box-Element ein Pseudoelement (::before) hinzu und legen seine Hintergrundeigenschaft so fest, dass die CSS-Variable --color verwendet wird. Wenn wir jedoch möchten, dass das Pseudoelement mithilfe des Schlüsselworts inherit die Hintergrundfarbe von .box erbt, funktioniert dies nicht wie erwartet.

Die Lösung

Um einen geerbten Wert zu speichern Wenn wir eine CSS-Variable verwenden, können wir den Fallback-Wert der Eigenschaft verwenden. Der Fallback-Wert wird als zweites Argument der Funktion var() angegeben. Zum Beispiel:

background: var(--color, inherit);

Auf diese Weise weisen wir die Hintergrundeigenschaft an, inherit als Fallback-Wert zu verwenden, wenn die Variable --color nicht definiert ist.

In unserem Fall jedoch Dies wird nicht funktionieren, da --color immer auf der :root-Ebene definiert ist. Um dieses Problem zu lösen, können wir den Anfangswert verwenden, um die Definition unserer benutzerdefinierten Eigenschaft aufzuheben und die Verwendung des Fallback-Werts zu erzwingen:

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

Der Anfangswert setzt die CSS-Variable auf ihren Anfangswert, der leer ist Wert. Wenn eine CSS-Variable einen Anfangswert hat, behandelt var() sie so, als hätte sie ihren Fallback-Wert.

Mit diesem Ansatz können wir den geerbten Wert in der CSS-Variablen --color speichern und ihn effektiv für die verwenden Hintergrundeigenschaft des Pseudoelements.

Das obige ist der detaillierte Inhalt vonWie speichert man geerbte Werte in CSS-Variablen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!