Warum werden meine verschachtelten benutzerdefinierten CSS-Eigenschaften ignoriert?

CSS-bereichsbezogene benutzerdefinierte Eigenschaften werden in verschachtelten Deklarationen ignoriert

Beim Definieren benutzerdefinierter Eigenschaften in CSS ist es wichtig zu verstehen, wie sich der Bereich auf deren Bewertung auswirkt. Benutzerdefinierte Eigenschaften mit Gültigkeitsbereich sind nur lokal innerhalb des Elements oder der Komponente verfügbar, in dem sie definiert sind. Beim Versuch, bereichsbezogene benutzerdefinierte Eigenschaften in äußeren Bereichen zu verwenden, entsteht jedoch häufig eine Herausforderung.

In diesem speziellen Fall besteht das Ziel darin, einen Skalierungsfaktor über eine benutzerdefinierte Eigenschaft zu definieren und ihn auf verschiedene Elemente anzuwenden. Allerdings werden, wie gezeigt, alle Listenelemente unabhängig von der angewendeten Skalierungsklasse gleich skaliert.

Um dieses Problem zu beheben, ist es wichtig zu beachten, dass benutzerdefinierte Eigenschaften von oben nach unten ausgewertet werden. Wenn eine benutzerdefinierte Eigenschaft auf der Stammebene definiert wird, wie in diesem Beispiel, wird jede nachfolgende Definition derselben Eigenschaft innerhalb verschachtelter Elemente ignoriert.

Betrachten Sie diese vereinfachte Darstellung:

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

Hier wird die benutzerdefinierte Eigenschaft --color auf der Stammebene definiert. Wenn wir versuchen, es innerhalb eines Span-Elements zu überschreiben:

<div>
  <div class="box">
    <span>

Das Span-Element mit verschachtelter CSS-Deklaration wird nicht rot. Dies liegt daran, dass die benutzerdefinierte Eigenschaft bereits auf der Stammebene ausgewertet wurde, wodurch --color auf Blau gesetzt wurde und Überschreibungsversuche ignoriert werden.

Im Gegensatz dazu wird das Span-Element mit dem geerbten --c: rot rot, weil es den Wert der benutzerdefinierten Eigenschaft von seinem übergeordneten Element erbt.

Um den gewünschten Effekt zu erzielen, muss sichergestellt werden, dass die benutzerdefinierte Eigenschaft innerhalb jeder verschachtelten Komponente einzeln ausgewertet wird. Dies kann erreicht werden, indem die Eigenschaft lokal innerhalb jeder Klasse oder Komponente und nicht auf der Stammebene definiert wird.

Das obige ist der detaillierte Inhalt vonWarum werden meine verschachtelten benutzerdefinierten CSS-Eigenschaften ignoriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!