CSS-!important-Regel

Was ist !important?

in CSS !important Regel verwendet, um der Eigenschaft/Wert eine höhere Priorität als die normale Stil zu verleihen.

Tatsächlich, wenn Sie !important Regel, die alle vorherigen Styleregeln für diese spezifische Eigenschaft des Elements überdeckt!

Lassen Sie uns ein Beispiel betrachten:

Beispiel

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Selbst ausprobieren

Beispielinterpretation

In diesem Beispiel erhalten alle drei Absätze eine rote Hintergrundfarbe, obwohl der ID-Selektor und der KlassenSelektor eine höhere Spezifität haben.!important Die Regel überdeckt die background-color-Eigenschaft in beiden Fällen.

Wichtige Informationen zu !important

Überdecken !important Die einzige Möglichkeit, Regeln zu überdecken, ist durch die Aufnahme einer anderen Erklärung mit der gleichen (oder höheren) Spezifität im Quellcode. !important Regeln - das ist der Anfang des Problems! Dies macht den CSS-Code verwirrend und die Fehlerbehebung wird schwieriger, insbesondere wenn Sie große Stylesheets haben!

Hier erstellen wir ein einfaches Beispiel. Wenn Sie den CSS-Quellcode betrachten, ist es nicht ganz klar, welche Farbe als am wichtigsten angesehen wird:

Beispiel

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Selbst ausprobieren

Tipp:Verstehen !important Die Regel ist gut. Sie könnten es in einigen CSS-Quellcodes sehen. Aber nutzen Sie es bitte nicht, es sei denn, Sie müssen es unbedingt.

gibt es vielleicht eine oder zwei Fälle, in denen die Verwendung von !important gerechtfertigt ist

Eine andere Verwendung !important falls Sie bestimmte Stile, die auf andere Weise nicht abgedeckt werden können, überdecken müssen. Dies könnte daran liegen, dass Sie ein Content-Management-System (CMS) verwenden und das CSS-Code nicht bearbeiten können. Dann können Sie einige benutzerdefinierte Stile einrichten, um bestimmte CMS-Stile zu überdecken.

Eine andere Verwendung !important Die Situation ist: Angenommen, Sie möchten, dass alle Buttons auf der Seite ein spezielles Aussehen haben. Hier ist der Stil des Buttons in Grau mit weißem Text sowie einigen Innenabständen und Rändern:

Beispiel

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Selbst ausprobieren

Wenn wir den Button in ein anderes Element mit höherer Spezifität platzieren, kann das Aussehen des Buttons manchmal verändert werden und es können Konflikte bei den Attributen auftreten. Hier ist ein Beispiel:

Beispiel

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Selbst ausprobieren

Um sicherzustellen, dass alle Buttons jederzeit dasselbe Aussehen haben, können wir !important Regeln zu den Eigenschaften des Buttons hinzufügen, wie folgt:

Beispiel

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Selbst ausprobieren