Dasrevert-CSS-Schlüsselwort setzt den kaskadierten Wert der Eigenschaft von ihrem aktuellen Wert auf den Wert zurück, den die Eigenschaft gehabt hätte, wenn keine Änderungen durch den aktuellenStilursprung am aktuellen Element vorgenommen worden wären. Es setzt die Eigenschaft also entweder auf den vom Benutzeragenten festgelegten Wert, den vom Benutzer festgelegten Wert, den geerbten Wert (falls die Eigenschaft vererbbar ist) oder den Anfangswert zurück. Es kann auf jede CSS-Eigenschaft angewandt werden, einschließlich der CSS-Kurzschreibweiseall.

Dieses Schlüsselwort entfernt aus der Kaskade alle Stile, die überschrieben wurden, bis der Stil erreicht wird, zu dem zurückgekehrt wird.

• Wenn es in den eigenen Stilen einer Website (der Autorursprung) verwendet wird, setztrevert den kaskadierten Wert der Eigenschaft auf den benutzerdefinierten Stil des Benutzers zurück, falls ein solcher vorhanden ist; andernfalls wird der Stil auf den Standardstil des Benutzeragenten zurückgesetzt.
• Wenn es in einem benutzerdefinierten Stylesheet des Benutzers verwendet wird oder wenn der Stil vom Benutzer angewandt wurde (der Benutzerursprung), setztrevert den kaskadierten Wert auf den Standardstil des Benutzeragenten zurück.
• Wenn es innerhalb der Standardstile des Benutzeragenten verwendet wird, ist dieses Schlüsselwort funktional äquivalent zuunset.

Dasrevert-Schlüsselwort funktioniert in vielen Fällen genau wieunset. Der einzige Unterschied besteht darin, dass bei Eigenschaften, die vom Browser oder von benutzerdefinierten Stylesheets festgelegt wurden (auf der Browserseite festgelegt), Unterschiede bestehen können.

Revert wird keine Regeln beeinflussen, die auf die Kinder eines Elements angewandt werden, das Sie zurücksetzen (aber die Auswirkungen einer Elternregel auf ein Kind entfernen). Wenn Sie also beispielsweise eincolor: green für alle Abschnitte undall: revert für einen bestimmten Abschnitt haben, wird die Farbe des Abschnitts schwarz sein. Wenn Sie jedoch eine Regel haben, um alle Absätze rot zu machen, werden alle Absätze in allen Abschnitten weiterhin rot sein.

Beispiele

Revert vs. unset

Obwohlrevert undunset ähnlich sind, unterscheiden sie sich bei einigen Eigenschaften für bestimmte Elemente.

Im folgenden Beispiel setzen wir ein benutzerdefiniertesfont-weight, versuchen dann jedoch, es inline im HTML-Dokument aufrevert undunset zu setzen. Dasrevert-Schlüsselwort setzt den Text auf fett zurück, da dies der Standardwert für Überschriften in den meisten Browsern ist. Dasunset-Schlüsselwort hält den Text normal, da als geerbte Eigenschaft dasfont-weight dann seinen Wert vom Body erben würde.

HTML

<h3>  This should have its original font-weight (bold) and color: black</h3><p>Just some text</p><h3>  This will still have font-weight: normal, but color: black</h3><p>Just some text</p>

CSS

h3 {  font-weight: normal;  color: blue;}

Ergebnis

Alles revertieren

Das Revertieren aller Werte ist in einer Situation nützlich, in der Sie mehrere Stiländerungen vorgenommen haben und dann zu den Standardwerten des Browsers zurückkehren möchten. Also im obigen Beispiel, anstattfont-weight undcolor einzeln zurückzusetzen, könnten Sie einfach alle auf einmal zurücksetzen – indem Sie dasrevert-Schlüsselwort aufall anwenden.

HTML

<h3>This will have custom styles</h3><p>Just some text</p><h3>This should be reverted to browser/user defaults.</h3><p>Just some text</p>

CSS

h3 {  font-weight: normal;  color: blue;  border-bottom: 1px solid grey;}

Ergebnis

Revert auf ein übergeordnetes Element

Revertieren entfernt effektiv den Wert für das Element, das Sie mit einer Regel auswählen, und das passiert nur für dieses Element. Um dies zu veranschaulichen, werden wir eine grüne Farbe auf einen Abschnitt und eine rote Farbe auf einen Absatz setzen.

HTML

<main>  <section>    <h3>This h3 will be dark green</h3>    <p>Text in paragraph will be red.</p>    This stray text will also be dark green.  </section>  <section>    <h3>This h3 will be steelblue</h3>    <p>Text in paragraph will be red.</p>    This stray text will also be steelblue.  </section></main>

CSS

main {  border: 3px solid steelblue;}section {  margin: 0.5rem;  border: 2px dashed darkgreen;}

main {  color: steelblue;}section {  color: darkgreen;}p {  color: red;}section.with-revert {  color: revert;}

Ergebnis

Beachten Sie, wie der Absatz weiterhin rot ist, obwohl diecolor-Eigenschaft für den Abschnitt zurückgesetzt wurde. Beachten Sie auch, dass sowohl die Überschrift als auch der einfache Textknotensteelblue sind. Das Ergebnis des Revertierens macht es, als obsection { color: darkgreen; } für den Abschnitt mitcolor: revert nicht existiert hätte.

Auch wenn weder der Benutzeragent noch der Benutzer die Farben von<h3> oder<section> überschreiben, wird diesteelblue-Farbe von<main> geerbt, da diecolor-Eigenschaft eine geerbte Eigenschaft ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwenden Sie dasinitial-Schlüsselwort, um eine Eigenschaft auf ihren Anfangswert zu setzen.
• Verwenden Sie dasinherit-Schlüsselwort, um die Eigenschaft eines Elements identisch mit der seines Elternteils zu machen.
• Verwenden Sie dasrevert-layer-Schlüsselwort, um eine Eigenschaft auf den Wert zurückzusetzen, der in einer vorherigen Kaskadenschicht festgelegt wurde.
• Verwenden Sie dasunset-Schlüsselwort, um eine Eigenschaft auf ihren geerbten Wert zu setzen, wenn sie vererbt wird, oder auf ihren Anfangswert, wenn nicht.
• Dieall-Eigenschaft ermöglicht es Ihnen, alle Eigenschaften gleichzeitig auf ihren Anfangs-, geerbten, zurückgesetzten oder nicht gesetzten Zustand zurückzusetzen.