Wie gehen benutzerdefinierte CSS-Eigenschaften mit Vererbung und Überschreibung um?

Benutzerdefinierte CSS-Eigenschaften: Umfang und Vererbung verstehen

Beim Definieren benutzerdefinierter CSS-Eigenschaften ist das Verständnis ihres Umfangs entscheidend, um die gewünschten Effekte zu erzielen. Benutzerdefinierte Eigenschaften, die innerhalb eines Elements deklariert werden, gelten für dieses Element und seine Nachkommen. Diese Festlegung des Gültigkeitsbereichs kann jedoch manchmal zu unerwartetem Verhalten führen, wie in dieser Frage dargestellt.

Das Problem ergibt sich aus der Tatsache, dass im bereitgestellten Code die benutzerdefinierte Eigenschaft --scale auf Stammebene definiert und dann überschrieben wird innerhalb untergeordneter Elemente. Dieses überschreibende Verhalten wird bei der Verwendung von benutzerdefinierten Eigenschaften mit Gültigkeitsbereich nicht erwartet.

Um dieses Problem zu veranschaulichen, analysieren wir das CSS:

: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);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

Hier hängen die --size-*-Eigenschaften vom Wert ab von --scale. Wenn jedoch --scale innerhalb der Klassen .scale-1x, .scale-2x und .scale-3x definiert wird, überschreibt es den in :root definierten Wert.

Das erwartete Verhalten wäre für -- Die Scale-Eigenschaft wird bei jedem Element, in dem sie definiert ist, ausgewertet, was zu unterschiedlichen Schriftgrößen für jede Liste führt. Dies geschieht jedoch nicht, da die benutzerdefinierte Eigenschaft bereits auf Stammebene ausgewertet wird.

Um dieses Problem zu beheben und den gewünschten Effekt zu erzielen, sollten Sie erwägen, benutzerdefinierte Eigenschaften mit Gültigkeitsbereich konsistenter zu verwenden. Definieren Sie beispielsweise --size-1, --size-2 und --size-3 innerhalb jeder .scale-*-Klasse und stellen Sie sicher, dass sie nur auf dieses Element beschränkt sind. Dies ermöglicht eine unabhängige Skalierung jeder Liste basierend auf dem Wert von --scale, der in der jeweiligen Klasse definiert ist.

Das obige ist der detaillierte Inhalt vonWie gehen benutzerdefinierte CSS-Eigenschaften mit Vererbung und Überschreibung um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!