CSS Die !wichtige Regel
Was ist wichtig?
Die !importantRegel in CSS wird verwendet, um einer Eigenschaft/einem Wert mehr Bedeutung als normal zu verleihen.
Wenn Sie die !importantRegel verwenden, werden in der Tat ALLE vorherigen Stilregeln für diese spezifische Eigenschaft dieses Elements außer Kraft gesetzt!
Schauen wir uns ein Beispiel an:
Beispiel
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Beispiel erklärt
Im obigen Beispiel. Alle drei Absätze erhalten eine rote Hintergrundfarbe, obwohl der ID-Selektor und der Klassenselektor eine höhere Spezifität haben. Die !importantRegel überschreibt die
background-colorEigenschaft in beiden Fällen.
Wichtig Über !wichtig
Die einzige Möglichkeit, eine !important
Regel außer Kraft zu setzen, besteht darin, eine andere !important
Regel für eine Deklaration mit der gleichen (oder höheren) Spezifität in den Quellcode aufzunehmen - und hier beginnt das Problem! Das macht den CSS-Code unübersichtlich und das Debuggen wird schwierig, besonders wenn Sie ein großes Stylesheet haben!
Hier haben wir ein einfaches Beispiel erstellt. Es ist nicht ganz klar, wenn man sich den CSS-Quellcode ansieht, welche Farbe als die wichtigste angesehen wird:
Beispiel
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Tipp: Es ist gut, die !important
Regel zu kennen, vielleicht sehen Sie sie in einigen CSS-Quellcodes. Verwenden Sie es jedoch nicht, wenn Sie es nicht unbedingt müssen.
Vielleicht ein oder zwei faire Verwendungen von !important
Eine Verwendungsmöglichkeit !importantbesteht darin, einen Stil zu überschreiben, der auf keine andere Weise überschrieben werden kann. Dies könnte der Fall sein, wenn Sie an einem Content Management System (CMS) arbeiten und den CSS-Code nicht bearbeiten können. Dann können Sie einige benutzerdefinierte Stile festlegen, um einige der CMS-Stile zu überschreiben.
Eine andere Verwendungsmöglichkeit !importantist: Angenommen, Sie möchten ein spezielles Aussehen für alle Schaltflächen auf einer Seite. Hier sind Schaltflächen mit einer grauen Hintergrundfarbe, weißem Text und etwas Polsterung und Rahmen gestaltet:
Beispiel
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Das Aussehen einer Schaltfläche kann sich manchmal ändern, wenn wir sie mit höherer Spezifität in ein anderes Element einfügen und die Eigenschaften in Konflikt geraten. Hier ist ein Beispiel dafür:
Beispiel
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Um allen Schaltflächen das gleiche Aussehen zu "zwingen", egal was passiert, können wir die !important
Regel wie folgt zu den Eigenschaften der Schaltfläche hinzufügen:
Beispiel
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}