CSS-Eigenschaft `all`

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die all Shorthand CSS-Eigenschaft setzt alle Eigenschaften eines Elements zurück, außer unicode-bidi, direction und CSS Custom Properties. Sie kann Eigenschaften auf ihre initialen oder geerbten Werte setzen oder auf die Werte, die in einer anderen Kaskadierungsebene oder aus einem Stylesheet-Ursprung angegeben sind.

Probieren Sie es aus

/* no all property */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Bestandteilseigenschaften

Diese Eigenschaft ist eine Shorthand-Eigenschaft für alle CSS-Eigenschaften außer unicode-bidi, direction und custom properties.

Syntax

css

/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

Werte

Die all-Eigenschaft wird als eines der CSS-Global-Keyword-Werte angegeben. Beachten Sie, dass keiner dieser Werte die Eigenschaften unicode-bidi und direction beeinflusst.

initial

Gibt an, dass alle Eigenschaften des Elements auf ihre initialen Werte zurückgesetzt werden sollen.

inherit

Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte zurückgesetzt werden sollen.

unset

Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte gesetzt werden sollen, wenn sie standardmäßig vererbt werden, oder auf ihre initialen Werte, wenn sie das nicht tun.

revert

Gibt ein Verhalten an, das vom Stylesheet-Ursprung abhängt, zu dem die Deklaration gehört:

Wenn die Regel zum Autor-Ursprung gehört, setzt der Wert revert die Kaskade auf die Benutzer-Ebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Autoren-Ebenen-Regeln für das Element angegeben wurden. Für revert schließt der Autoren-Ursprung die Override- und Animation-Ursprünge ein.
Wenn die Regel zum Benutzer-Ursprung gehört, setzt der Wert revert die Kaskade auf die User-Agent-Ebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Autoren-Ebenen- oder Benutzer-Ebenen-Regeln für das Element angegeben wurden.
Wenn die Regel zum User-Agent-Ursprung gehört, wirkt der Wert revert wie unset.

revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadierungsebene zurücksetzen sollen, wenn eine existiert. Wenn keine andere Kaskadierungsebene existiert, werden die Eigenschaften des Elements auf die übereinstimmende Regel in der aktuellen Ebene oder auf einen vorherigen Stil-Ursprung zurückgesetzt, falls eine existiert.

Formale Definition

Anfangswert	Es gibt keinen praktischen Initialwert dafür.
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie der angegebene Wert wird er auf alle Eigenschaften angewandt, für die dies eine Kurzschreibweise ist.
Animationstyp	wie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer `unicode-bidi` und `direction`)

Formale Syntax

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer  |
  revert-rule

Beispiele

In diesem Beispiel enthält die CSS-Datei Stile für das <blockquote>-Element sowie einige Stile für das übergeordnete <body>-Element. Verschiedene Ausgaben im Ergebnis-Unterabschnitt zeigen, wie das Styling des <blockquote>-Elements beeinflusst wird, wenn unterschiedliche Werte der Eigenschaft all innerhalb der blockquote-Regel angewendet werden.

HTML

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

Ergebnisse

A. Keine `all`-Eigenschaft

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

Dies ist das Szenario, in dem keine all-Eigenschaft innerhalb der blockquote-Regel gesetzt ist. Das <blockquote>-Element verwendet das Standard-Browser-Styling, das ihm einen Rand gibt, zusammen mit einer spezifischen Hintergrund- und Textfarbe, wie im Stylesheet angegeben. Es verhält sich auch wie ein Block-Element: Der Text, der darauf folgt, befindet sich darunter.

B. `all: initial`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}

Mit der Eigenschaft all auf initial in der blockquote-Regel verwendet das <blockquote>-Element nicht mehr das Standard-Browser-Styling: Es ist jetzt ein Inline-Element (initialer Wert), sein background-color ist transparent (initialer Wert), seine font-size ist medium, und seine color ist black (initialer Wert).

C. `all: inherit`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}

In diesem Fall verwendet das <blockquote>-Element nicht das Standard-Browser-Styling. Stattdessen erbt es die Stilwerte von seinem übergeordneten <body>-Element: Es ist jetzt ein Block-Element (geerbter Wert), seine background-color ist #F0F0F0 (geerbter Wert), seine font-size ist small (geerbter Wert), und seine color ist blue (geerbter Wert).

D. `all: unset`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}

Wenn der Wert unset auf die Eigenschaft all in der blockquote-Regel angewendet wird, verwendet das <blockquote>-Element nicht das Standard-Browser-Styling. Da background-color eine nicht geerbte Eigenschaft ist und font-size und color geerbte Eigenschaften sind, ist das <blockquote>-Element jetzt ein Inline-Element (initialer Wert), seine background-color ist transparent (initialer Wert), aber seine font-size ist weiterhin small (geerbter Wert), und seine color ist blue (geerbter Wert).

E. `all: revert`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}

Wenn die Eigenschaft all in der blockquote-Regel auf revert gesetzt ist, wird die blockquote-Regel als nicht existent angesehen und die Styling-Eigenschaftswerte werden von denen übernommen, die auf das übergeordnete body-Element angewendet werden. So wird das <blockquote>-Element als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue - alle Werte, die von der body-Regel geerbt wurden.

F. `all: revert-layer`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}

Es sind keine Kaskadierungsebenen in der CSS-Datei definiert, sodass das <blockquote>-Element seinen Stil von der passenden body-Regel erbt. Das <blockquote>-Element wird hier als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue - alle Werte, die von der body-Regel geerbt wurden. Dieses Szenario ist ein Beispiel für den Fall, wenn all, auf revert-layer gesetzt, sich genauso verhält wie wenn all auf revert gesetzt ist.