!important

Bei wichtigen Deklarationen werden die Cascading-Ursprünge und Schicht-Ordnungen umgekehrt. Ohne das wichtige Flag überschreiben Deklarationen in den Stylesheets des Autors Deklarationen in einem Benutzer-Stylesheet, die wiederum Deklarationen im Standard-Stylesheet des User-Agent überschreiben.

Wenn eine Deklaration wichtig ist, wird die Reihenfolge der Priorität umgekehrt. Deklarationen, die als wichtig in den User-Agent-Stylesheets markiert sind, überschreiben alle wichtigen Deklarationen in den Benutzer-Stylesheets. Ebenso überschreiten alle wichtigen Deklarationen in den Benutzer-Stylesheets alle wichtigen Deklarationen in den Stylesheets des Autors. Schließlich haben alle wichtigen Deklarationen Vorrang vor allen Animationen.

Durch die Umkehrung der Prioritätsreihenfolge für wichtige Deklarationen wird sichergestellt, dass Nutzer mit besonderen Bedürfnissen, wie personalisierten Farbschemata oder großen Schriftarten, die Stile des Autors bei Bedarf überschreiben können, indem sie einige Deklarationen in ihrem Benutzer-Stylesheet als wichtig markieren. Es wird auch garantiert, dass schädliche Erweiterungen keine wichtigen User-Agent-Stile überschreiben können, was die Funktionalität beeinträchtigen oder die Sicherheit negativ beeinflussen könnte.

Gibt es etwas, das Vorrang vor wichtigen Deklarationen hat? Ja, Übergänge. CSS-Übergänge sind ein Mittel, um die Geschwindigkeit zu steuern, mit der sich eine Eigenschaft von einem Wert auf einen anderen ändert. Wenn ein Übergang von einem Wert auf einen anderen erfolgt, wird eine Eigenschaft keine spezifische wichtige Deklaration einhalten.

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

In diesem Beispiel gehen die Eigenschaften color und background-color während zwei Sekunden in den Hover-Zustand über. Auch wenn die Standardzustände normale Deklarationen sind und die Hover-Zustände !important-Deklarationen darstellen, findet der Übergang dennoch statt.

Innerhalb jedes der drei Ursprünge für Stylesheets – Autor, Benutzer und User-Agent – überschreiben normale Deklarationen in ungeschichteten Styles geschichtete Deklarationen, wobei die zuletzt deklarierten Vorrang vor den zuvor deklarierten Schichten haben. Wichtige Deklarationen kehren die Prioritätsreihenfolge um: wichtige Deklarationen in der ersten Schicht haben Vorrang vor wichtigen Deklarationen in der nächsten Schicht und so weiter. Außerdem haben alle wichtigen Deklarationen Vorrang vor wichtigen Deklarationen außerhalb jeder Schicht.

Inline-Stile sind Stile, die mit dem style-Attribut definiert sind. Sie können auch normal oder wichtig sein. Inline-normale Stile haben Vorrang vor allen normalen Deklarationen, unabhängig von ihrem Ursprung. Inline-wichtige Stile haben Vorrang vor allen anderen wichtigen Stilen des Autors, unabhängig von der Schicht, aber wichtige Stile aus Stylesheets des Benutzers oder des User-Agent und Übergänge überschreiben sie.

Obwohl !important nicht Teil der Bestimmung der Spezifität ist, ist es damit verbunden. Wichtige Deklarationen überschreiben alle anderen Deklarationen aus dem gleichen Ursprung und Kaskadenschicht.

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

Dieses Beispiel zeigt einen Fall der Über-Spezifizierung eines Selektors. Egal, wie hoch die Selektor-Spezifität mit einer normalen Deklaration übereinstimmt, eine wichtige Deklaration aus der gleichen Quelle und Kaskadenschicht hat immer Vorrang. In diesem Fall wird der Absatz immer rot sein.

Wenn zwei wichtige Deklarationen aus dem gleichen Ursprung und der gleichen Schicht auf das gleiche Element angewendet werden, wählen Browser die Deklaration mit der höchsten Spezifität aus und verwenden sie.

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

In diesem Fall zählt die Spezifität des Selektors. Nur wenn die Selektoren die gleiche Spezifität hätten, würde die Quellreihenfolge eine Rolle spielen.

Die Deklaration einer Kurzschreibweise-Eigenschaft mit !important setzt alle Untereigenschaften als wichtig. Die folgenden beiden Selektor-Style-Blöcke sind äquivalent:

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

Dieses Beispiel zeigt einen der mehreren Gründe, warum das Vermeiden des wichtigen Flags allgemein empfohlen wird.

Wenn das !important-Flag zu einer Deklaration eines benutzerdefinierten Eigenschaftswerts hinzugefügt wird, macht es die Wertzuweisung wichtig. Das !important-Flag wird dann aus dem benutzerdefinierten Eigenschaftswert entfernt. Das !important-Flag wird nicht als Teil des benutzerdefinierten Eigenschaftswerts an die var()-Funktion übergeben.

:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}

<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>

In diesem Beispiel wird der Absatz rot und nicht blau sein, da die benutzerdefinierte Eigenschaftswertzuweisung wichtig ist. Das Blockzitat wird lila sein, weil die normale lila Deklaration nach der normalen roten Deklaration kommt.

Vermeiden Sie die Verwendung von !important, um Spezifität zu überschreiben. Wenn Sie absichtlich wichtige Deklarationen für UI-Anforderungen erstellen, kommentieren Sie in Ihrem CSS-Code, um den Wartenden zu erklären, warum sie diese Funktion nicht überschreiben sollten.

Selbst wenn Sie daran arbeiten, Stile mit hoher Spezifität zu überschreiben, die nicht unter Ihrer Kontrolle stehen, wie Stile in einem Drittanbieter-Plugin, das mit einem ID-Selektor deklariert wurde, müssen Sie !important nicht verwenden. Erwägen Sie stattdessen, das Drittanbieter-Stylesheet-Skript in eine benannte oder anonyme Schicht als Ihre erste Kaskadenschicht zu importieren, anstatt !important zu verwenden. Solange die externen Stile keine wichtigen Deklarationen enthalten, werden Ihre Stile die Widget-Stile unabhängig von der Spezifität überschreiben.

Wenn Sie ein externes Stylesheet mit wichtigen Deklarationen überschreiben müssen, erstellen Sie eine Kaskadenschicht, die die erforderlichen Überschreibungen enthält, und deklarieren Sie diese Schicht zuerst.

Wichtige Stile aus einem Benutzer-Stylesheet haben Vorrang vor den wichtigen Deklarationen des Autors, was bedeutet, dass das Hinzufügen eines !important-Flags zu den Stilen einer Website nicht verhindern wird, dass einzelne Benutzer mit besonderen Anforderungen, wie z.B. großen Schriftarten, Ihre Stile überschreiben können, indem sie wichtige Stile in ihrem eigenen Benutzer-Stylesheet hinzufügen.

Dieses Feature wird von allen Browsern unterstützt.

• CSS-Spezifität
• CSS-Kaskade