Die Regel !important in CSS wird verwendet, um einer Eigenschaft/einem Wert mehr Wichtigkeit als normal zu verleihen.
Tatsächlich werden, wenn Sie die Regel !important verwenden, ALLE vorherigen Stilregeln dafür überschrieben spezifische Eigenschaft für dieses Element!
Schauen wir uns ein Beispiel an:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Im Beispiel oben. Alle drei Absätze erhalten eine rote Hintergrundfarbe, obwohl der ID-Selektor und der Klassenselektor eine höhere Spezifität haben. Die Regel !important überschreibt in beiden Fällen die Eigenschaft background-color.
Die einzige Möglichkeit, einen !important zu überschreiben Die Regel besteht darin, einen weiteren !important einzuschließen Regel für eine Deklaration mit der gleichen (oder höheren) Spezifität im Quellcode - und hier beginnt das Problem! Dies macht den CSS-Code verwirrend und das Debuggen wird schwierig, insbesondere wenn Du hast ein großes Stylesheet!
Hier haben wir ein einfaches Beispiel erstellt. Es ist nicht ganz klar, wenn man es betrachtet der CSS-Quellcode, welche Farbe als am wichtigsten angesehen wird:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Tipp: Es ist gut, über den !important Bescheid zu wissen Regel. Möglicherweise sehen Sie es in einem CSS-Quellcode. Verwenden Sie es jedoch nur, wenn dies unbedingt erforderlich ist.
Eine Möglichkeit, !important zu verwenden, besteht darin, es zu überschreiben ein Stil, der auf keine andere Weise außer Kraft gesetzt werden kann. Dies könnte der Fall sein, wenn Sie es sind Sie arbeiten an einem Content Management System (CMS) und können den CSS-Code nicht bearbeiten. Anschließend können Sie einige benutzerdefinierte Stile festlegen, um einige der CMS-Stile zu überschreiben.
Eine andere Möglichkeit, !important zu verwenden, ist: Nehmen Sie an, Sie Sie möchten ein besonderes Aussehen für alle Schaltflächen auf einer Seite. Hier sind die Knöpfe in Grau gehalten Hintergrundfarbe, weißer Text und etwas Abstand und Rand:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>
</body>
</html>
Das Aussehen einer Schaltfläche kann sich manchmal ändern, wenn wir sie mit in ein anderes Element einfügen höhere Spezifität und die Eigenschaften geraten in Konflikt. Hier ist ein Beispiel dafür:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>
Um zu „erzwingen“, dass alle Schaltflächen das gleiche Aussehen haben, egal was passiert, können wir den !important hinzufügen Regel zu den Eigenschaften der Schaltfläche hinzufügen, etwa so:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>