Dasrevert-layerCSS-weite Schlüsselwort setzt den Wert einer Eigenschaft in einerKaskadenschicht auf den Wert der Eigenschaft in einer vorherigen Kaskadenschicht zurück. Der Wert einer Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob keine Regeln für das Ziel-Element in der aktuellen Kaskadenschicht angegeben wurden.

Falls es keine andere Kaskadenschicht gibt, auf die für die übereinstimmende CSS-Regel zurückgesetzt werden kann, wird der Eigenschaftswert auf denberechneten Wert aus der aktuellen Schicht zurückgesetzt. Wenn es außerdem keine übereinstimmende CSS-Regel in der aktuellen Schicht gibt, wird der Eigenschaftswert für das Element auf den Stil eines vorherigenStil-Ursprungs zurückgesetzt.

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

revert-layer vs. revert

Dasrevert-layer-Schlüsselwort ermöglicht es Ihnen, Stile auf die in vorherigen Kaskadenschichten innerhalb desAutor-Ursprungs spezifizierten Werte zurückzusetzen. Im Vergleich dazu ermöglicht dasrevert-Schlüsselwort das Zurücksetzen von Stilen, die im Autor-Ursprung angewendet werden, auf die im Benutzer-Ursprung oder Benutzeragenten-Ursprung spezifizierten Werte.

Dasrevert-layer-Schlüsselwort ist idealerweise gedacht, um auf Eigenschaften innerhalb einer Kaskadenschicht angewendet zu werden. Wird es jedoch auf Eigenschaften außerhalb einer Kaskadenschicht angewendet, werden Eigenschaftswerte auf alle Werte zurückgesetzt, die durch Präsentationshinweise (wiewidth- undheight-Attribute oder das<s>-Element in HTML) festgelegt wurden, und standardmäßig auf die vom Benutzeragenten-Stilblatt oder Benutzerstil festgelegten Werte. Im Gegensatz zumrevert-Schlüsselwort, das Präsentationshinweise als Teil des Autor-Ursprungs betrachtet und ebenfalls zurücksetzt, ignoriert dasrevert-layer-Schlüsselwort Präsentationshinweise außerhalb der Kaskadenschicht und setzt diese daher nicht zurück.

Beispiele

Standardverhalten der Kaskadenschicht

Im folgenden Beispiel sind in der CSS zwei Kaskadenschichten definiert,base undspecial. Standardmäßig überschreiben Regeln in derspecial-Schicht konkurrierende Regeln in derbase-Schicht, daspecial nachbase in der@layer-Deklarationsanweisung aufgeführt ist.

HTML

<p>This example contains a list.</p><ul>  <li>Item one</li>  <li>Item two</li>  <li>Item three</li></ul>

CSS

@layer base, special;@layer special {  .item {    color: red;  }}@layer base {  .item {    color: blue;  }  .feature {    color: green;  }}

Ergebnis

Alle<li>-Elemente entsprechen deritem-Regel in derspecial-Schicht und sind rot. Dies ist das Standardverhalten der Kaskadenschicht, bei dem Regeln in derspecial-Schicht Vorrang vor Regeln in derbase-Schicht haben.

Zurücksetzen auf Stil in vorheriger Kaskadenschicht

Sehen wir uns an, wie dasrevert-layer-Schlüsselwort das Standardverhalten der Kaskadenschicht ändert. Für dieses Beispiel enthält diespecial-Schicht eine zusätzlichefeature-Regel, die das erste<li>-Element anvisiert. Diecolor-Eigenschaft in dieser Regel ist aufrevert-layer gesetzt.

HTML

<p>This example contains a list.</p><ul>  <li>Item one</li>  <li>Item two</li>  <li>Item three</li></ul>

CSS

@layer base, special;@layer special {  .item {    color: red;  }  .feature {    color: revert-layer;  }}@layer base {  .item {    color: blue;  }  .feature {    color: green;  }}

Ergebnis

Mitcolor aufrevert-layer gesetzt, wird dercolor-Eigenschaftswert auf den Wert in der übereinstimmendenfeature-Regel in der vorherigen Schichtbase zurückgesetzt, und so ist 'Item one' nun grün.

Zurücksetzen auf Stil in vorherigem Ursprung

Dieses Beispiel zeigt das Verhalten desrevert-layer-Schlüsselwortes, wenn es keine Kaskadenschicht gibt, auf die zurückgesetzt werden kannund es keine übereinstimmende CSS-Regel in der aktuellen Schicht gibt, um den Eigenschaftswert zu übernehmen.

HTML

<p>This example contains a list.</p><ul>  <li>Item one</li>  <li>Item two</li>  <li>Item three</li></ul>

CSS

@layer base {  .item {    color: revert-layer;  }}

Ergebnis

Der Stil für alle<li>-Elemente wird auf die Standardwerte im Benutzeragenten-Ursprung zurückgesetzt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• initial
• inherit
• revert
• unset
• all
• CSS-Kaskadierung und Vererbung Modul