Heim > Artikel > Web-Frontend > Warum sollten wir !important verwenden?
Warum sollten wir !important verwenden?
- 王林nach vorne
- 2023-08-23 21:45:021087Durchsuche
In CSS ist „!important“ ein Schlüsselwort, das wir mit den Werten der CSS-Eigenschaften verwenden. Wenn wir „!important“ mit dem CSS-Eigenschaftswert verwenden, misst der Browser diesem Eigenschaftswert mehr Bedeutung als den anderen Eigenschaftswerten desselben Elements bei.
Hier sind einige Anwendungsfälle, in denen wir das „!important“ mit den CSS-Eigenschaftswerten verwenden müssen.
Im Content Management System (CMS) können wir das CSS der Webseite nicht bearbeiten. Wenn wir also der Webseite zusätzliches CSS hinzufügen, kann es nicht auf das spezifische Element angewendet werden, aber wenn wir „!important“ mit CSS verwenden, können wir die Anfangswerte bestimmter CSS-Eigenschaften überschreiben.
Wenn wir eine UI-Bibliothek in Web-Frameworks wie ReactJS, Svelte usw. verwenden, können wir manchmal das CSS der UI-Komponente nicht bearbeiten. In solchen Fällen können wir „!important“ mit CSS-Eigenschaften verwenden, um deren Werte zu überschreiben.
Die Echtzeitanwendung enthält große CSS-Dateien. Manchmal wirkt sich CSS aufgrund unbekannter Überschreibungen nicht auf das Element aus. In diesem Fall können wir „!important“ verwenden, um alle Werte einer bestimmten Eigenschaft für das bestimmte Element zu überschreiben.
Syntax
Benutzer können der folgenden Syntax folgen, um „!important“ mit den CSS-Eigenschaftswerten zu verwenden.
CSS-property: value !important
In der obigen Syntax kann die CSS-Eigenschaft eine beliebige CSS-Eigenschaft sein, z. B. „marge“, „padding“, „padding-left“, „font-size“ usw., und „value“ kann ein respektierter Wert für die CSS-Eigenschaft sein.
Beispiel
Im folgenden Beispiel haben wir drei div-Elemente mit den Klassennamen „black“, „grey“ und „red“ erstellt. In CSS haben wir dem div-Element die Hintergrundfarbe basierend auf den Klassennamen zugewiesen.
Außerdem haben wir die CSS-Eigenschaft „background-color: pink“ auf alle div-Elemente mit dem Schlüsselwort „!important“ angewendet. In der Ausgabe können Benutzer beobachten, dass die Hintergrundfarbe aller Divs rosa wird, da wir „!important“ verwendet haben.
<html>
<head>
<style>
.black {background-color: black;}
.grey {background-color: grey;}
.red {background-color: red;}
div {
background-color: pink !important;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<div class = "black">
This is a black div.
</div>
<div class = "grey">
This is a grey div.
</div>
<div class = "red">
This is a red div.
</div>
</body>
</html>
Beispiel
Im Beispiel unten haben wir zwei verschiedene Absätze erstellt. Ein Absatz enthält den Klassennamen „eins“ und ein anderer enthält den Klassennamen „zwei“. Wir haben auf alle
-Elemente etwas CSS angewendet. Elemente.
Um das CSS eines Elements mit dem Klassennamen „one“ zu überschreiben, haben wir das Schlüsselwort „!important“ verwendet, um den auf das Element „
“ angewendeten Stil zu überschreiben. In der Ausgabe können Benutzer beobachten, dass der erste Absatz unterschiedliche Stile hat.
<html>
<head>
<style>
p {
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
}
.one {
background-color: green !important;
border: 5px dotted blue !important;
}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<p class = "one"> This is a paragraph. </p>
<p class = "two"> This is another paragraph. </p>
</body>
</html>
Beispiel
Wir werden anhand des folgenden Beispiels lernen, das „!important“ durch die Verwendung eines anderen „!important“ zu überschreiben. Wir haben die drei div-Elemente mit den Klassennamen „initial“, „middle“ und „final“ erstellt.
Wir haben „!important“ mit der CSS-Eigenschaft „background-color“ verwendet, die wir auf div-Elemente anwenden. Daher ist der Hintergrund aller div-Elemente zunächst aquamarinfarben. Danach haben wir erneut „!important“ mit der CSS-Eigenschaft „background-color“ verwendet und es auf die Elemente mit den Klassennamen „middle“ und „final“ angewendet.
In der Ausgabe können Benutzer beobachten, dass die Farben Blau und Helllachs die Farbe „Aqua“ überschreiben.
<html>
<head>
<style>
div {
background-color: aqua !important;
margin: 10px;
padding: 5px;
}
.middle {background-color: blue !important;}
.final {background-color: lightsalmon !important;}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<div class = "initial">
This is an initial Div element.
</div>
<div class = "middle">
This is a middle Div element.
</div>
<div class = "final">
This is a final Div element.
</div>
</body>
</html>
Fazit
Benutzer haben gelernt, das „!important“ in CSS zu verwenden. Grundsätzlich sollten wir die übermäßige Verwendung des „!important“ vermeiden; Andernfalls kann es jedem Kopfzerbrechen bereiten, viele „!important“-Aufgaben zu lösen, da dadurch das CSS für das Element überschrieben wird.
Benutzer können jedoch „!important“ verwenden, während sie das CSS des Content-Management-Systems einer Bibliothek oder einer UI-Komponente aktualisieren.
Das obige ist der detaillierte Inhalt vonWarum sollten wir !important verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!