Warum können bereichsbezogene benutzerdefinierte CSS-Eigenschaften geerbte Werte nicht überschreiben?

Bereichsbezogene benutzerdefinierte CSS-Eigenschaften: Überschreiben geerbter Werte

Beim Arbeiten mit benutzerdefinierten CSS-Eigenschaften wirkt sich der Bereich, in dem sie definiert sind, auf deren Verhalten aus. In diesem Fall werden bereichsbezogene benutzerdefinierte Eigenschaften verwendet, um Größen basierend auf einer Variablen zu skalieren, die in einem äußeren Bereich definiert ist. Der gewünschte Effekt wird jedoch nicht erzielt, da alle drei Listen im gleichen Maßstab angezeigt werden.

Verstehen des Scoping-Problems

Benutzerdefinierte Eigenschaften, die mit definiert wurden – das ist nicht der Fall In anderen Regeln verschachtelte Regeln gelten als global gültig und wirken sich auf alle Elemente im Dokument aus. Wenn jedoch eine benutzerdefinierte Eigenschaft innerhalb einer verschachtelten Regel definiert wird, wird sie auf diese Regel und ihre Nachkommen beschränkt. Dies bedeutet, dass alle Elemente außerhalb dieser Regel den Wert der benutzerdefinierten Eigenschaft nicht erben.

Zurücksetzen der benutzerdefinierten Eigenschaft

Im bereitgestellten Code definiert das Stammelement die - -scale benutzerdefinierte Eigenschaft und berechnet die darauf basierenden --size-*-Werte. Anschließend definieren untergeordnete Elemente ihre eigene benutzerdefinierte Eigenschaft --scale. Dies führt dazu, dass die untergeordneten Elemente den geerbten --scale-Wert vom Stammelement überschreiben.

Um dieses Problem zu beheben, muss die benutzerdefinierte Eigenschaft --scale innerhalb der untergeordneten Elemente auf einen neuen Wert zurückgesetzt werden für die Berechnungen verwendet. Dadurch wird die benutzerdefinierte Eigenschaft effektiv auf die untergeordneten Elemente und ihre Nachkommen beschränkt.

Aktualisierter Code

Hier ist eine aktualisierte Version des Codes mit den Korrekturen:

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

Das obige ist der detaillierte Inhalt vonWarum können bereichsbezogene benutzerdefinierte CSS-Eigenschaften geerbte Werte nicht überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!