revert-rule

Das revert-rule CSS-weites Schlüsselwort setzt den vererbten Wert einer Eigenschaft auf den Wert zurück, den sie gehabt hätte, wenn die aktuelle Stilregel nicht vorhanden gewesen wäre. Die Kaskade bestimmt dann den Wert aus den verbleibenden Deklarationen – dies könnte eine andere Regel in derselben Kaskadenschicht, eine Regel in einer anderen Schicht, ein anderer Stilursprung oder ein Standardwert (inherited oder initial) sein.

Wenn es in einer CSS-Animation (dem Animationsursprung) verwendet wird, verhält sich das revert-rule Schlüsselwort wie revert-layer.

Dieses Schlüsselwort kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibweise all.

Revert-rule vs. revert-layer vs. revert

Die revert-rule, revert-layer, und revert Schlüsselwörter setzen alle die Kaskade zurück, allerdings auf unterschiedlichen Ebenen der Granularität:

revert entfernt alle Deklarationen aus dem aktuellen Stilursprung und setzt auf den vorherigen Ursprung zurück (zum Beispiel von Autorenstilen zu Benutzer-Agent-Stilen).
revert-layer entfernt alle Deklarationen aus der aktuellen Kaskadenschicht und geht zur vorherigen Schicht innerhalb desselben Ursprungs zurück.
revert-rule entfernt nur die Deklarationen aus der aktuellen Stilregel. Andere Regeln in derselben Kaskadenschicht gelten weiterhin.

Dies macht revert-rule nützlich, um spezifische Deklarationen innerhalb einer Regel bedingt zu ignorieren, während Deklarationen aus anderen Regeln in derselben Schicht weiterhin respektiert werden.

Beispiele

Zurück zur vorherigen Regel

In diesem Beispiel zielen zwei Regeln auf dasselbe Element. Die zweite Regel verwendet revert-rule für die color-Eigenschaft, was dazu führt, dass die Kaskade den Wert bestimmt, als ob die p.special-Regel nicht vorhanden wäre, und auf den Wert zurückfällt, der von der ersten Regel festgelegt wurde.

HTML

html

<p class="special">This paragraph has special styling.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

css

p {
  color: blue;
  font-weight: bold;
}

p.special {
  color: revert-rule;
  border: 1px solid currentColor;
}

Ergebnis

Der Text des Absatzes ist durch die p-Regel blau, weil color: revert-rule die color-Deklaration in p.special ignorieren lässt. Die Deklarationen font-weight und border bleiben unverändert.

Zurücksetzen aus einem Stil-Attribut

Wenn revert-rule in einem Stil-Attribut verwendet wird, bewirkt es, dass die Kaskade handelt, als ob das Stil-Attribut nicht vorhanden wäre. Dies funktioniert, weil das Stil-Attribut als eigene Stilregel behandelt wird.

HTML

html

<p style="color: revert-rule">This text uses the stylesheet color.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

css

p {
  color: green;
}

Ergebnis

Der Text des Absatzes ist grün, weil revert-rule die Kaskade die Deklaration des Stil-Attributs ignorieren lässt und die p-Regel wirksam wird.

Verkettung mehrerer `revert-rule` Werte

Wenn mehrere Regeln revert-rule für dieselbe Eigenschaft verwenden, ignoriert die Kaskade jede von ihnen nacheinander und geht durch frühere Regeln zurück, bis sie einen konkreten Wert findet.

HTML

html

<p class="a b">This text is styled by a chain of revert-rule values.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

css

p {
  color: red;
}
p.a {
  color: revert-rule;
}
p.b {
  color: revert-rule;
}

Ergebnis

Sowohl die p.b- als auch die p.a-Regeln werden durch revert-rule ignoriert. Die Kaskade fällt auf die p-Regel zurück, sodass der Text rot ist.

Spezifikationen

Spezifikation
CSS Cascading and Inheritance Level 5 # revert-rule-keyword

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden