Können wir benutzerdefinierte CSS-Eigenschaften verwenden, um Werte von übergeordneten Elementen zu erben?

Können wir geerbte Werte in benutzerdefinierten CSS-Eigenschaften speichern?

In CSS bieten benutzerdefinierte Eigenschaften (auch als CSS-Variablen bezeichnet) eine praktische Möglichkeit, Werte durchgehend zu speichern und wiederzuverwenden ein Dokument. Können diese Variablen jedoch Werte von ihren übergeordneten Elementen erben?

Betrachten wir einen Beispielcode:

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

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

In diesem Beispiel möchten wir die Hintergrundfarbe des .box-Elements für erben Es ist ein :before-Pseudoelement mit CSS-Variablen. Allerdings ist die Variable --color auf der :root-Ebene definiert und das Pseudoelement :before ist in .box verschachtelt.

Das Festlegen des Hintergrunds: inherit on :before funktioniert nicht, da benutzerdefinierte Eigenschaften Vorrang haben über geerbte Werte.

Die Lösung: Anfangswert-Fallback

Um einen geerbten Wert in einer CSS-Variablen zu speichern, können wir den CSS-Anfangswert als Fallback verwenden. Der Anfangswert stellt den Standard- oder nicht gesetzten Zustand einer Eigenschaft dar.

In unserem Fall können wir unseren Code wie folgt ändern:

.box:before {
  ...
  background: var(--color, initial);
  ...
}

Durch Angabe von initial als Fallback-Wert für var( --color) erzwingen wir die Verwendung des geerbten Werts, wenn --color nicht explizit festgelegt ist. Dadurch können wir die Hintergrundfarbe vom übergeordneten Element erben.

Um dies zu demonstrieren, setzen wir die Hintergrundfarbe von .box auf Grau. Auch wenn wir in diesem Fall --color nicht explizit definieren, erbt das :before-Pseudoelement aufgrund des Anfangswert-Fallbacks dennoch die Hintergrundfarbe von .box.

.box {
  background: gray;
  --color: initial;
}

Das obige ist der detaillierte Inhalt vonKönnen wir benutzerdefinierte CSS-Eigenschaften verwenden, um Werte von übergeordneten Elementen zu erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!