!Wichtige Regel in CSS erklärt

!Wichtige Regel in CSS erklärt

Die CSS -Eigenschaften werden in einer Reihenfolge angewendet, die durch die Verwendung des Spezifitätskonzepts in CSS definiert wird. Manchmal müssen Sie jedoch möglicherweise den Wert eines CSS -Eigenschaften gegenüber den anderen Werten derselben Eigenschaft Bedeutung geben. Dafür die !Wichtiges Schlüsselwort wird mit einer CSS -Eigenschaft verwendet, um es stärker zu machen als andere Eigenschaften. Dieser Artikel zeigt die Verwendung der !Wichtige Regel in CSS.

Wie !Wichtige Regel funktioniert in CSS

Um die Arbeit zu verstehen, müssen Sie ein Verständnis der Syntax haben, gefolgt von !wichtige Regel.

Selector Eigenschaft: Wert !wichtig;

Der Wähler bezieht sich auf den CSS -Selektor, der verwendet wird, während die Eigentum bezieht sich auf die CSS -Eigenschaft, die mit einigen angewendet wird Wert. Die Platzierung der !Wichtiges Schlüsselwort ist auch von Bedeutung, und es muss am Ende des Eigenschaftswerts liegen, wie in der Syntax gezeigt.

Wie benutzt man !Wichtige Regel in CSS

Als die !Wichtige Regel folgt nicht der Spezifität; Somit spielt es keine Rolle, wo die !Wichtige Regel wird angewendet, es steht nur auf höchstem Niveau der Spezifität. Lassen Sie uns einige Beispiele haben, um ein klareres Bild von diesem Phänomen zu erhalten.

Beispiel 1: Verwenden von externen, internen und Inline -CSS

Normalerweise hat das Inline -CSS die höchste Priorität, gefolgt von internen und externen CSS. Der folgende Code verwendet den !Wichtige Regel in einem externen Stilblatt, um sein übergeordnetes Verhalten zu zeigen.

Html

Willkommen bei LinuxHint!

Im obigen Code ein

Element wird mit Inline -Styling verwendet, das die Hintergrundfarbe verändern will.

Externes CSS

H3
Hintergrundfarbe: LightGreen !wichtig;
Polsterung: 5px;
Rand: fest dünn;
Breite: 50%;

Der obige Code bezieht sich auf das externe Stylesheet, das mit dem HTML -Dokument verknüpft wäre. Es wird beobachtet, dass die Eigenschaft im Hintergrundfarben eine hat !wichtig mit ihm regieren.

Interne CSS

H3 Hintergrundfarbe: SkyBlue;

Der obige CSS -Code wurde als internes CSS verwendet. Dieses interne CSS versucht auch, die Hintergrundfarbe der Hintergrundfarbe zu ändern

Element.

Ausgang

Obwohl die Inline eine höhere Priorität hat als intern und extern. Wir haben jedoch die benutzt !Wichtiges Schlüsselwort mit der Hintergrund-Farben-Eigenschaft in externen CSS. Daher wird die Hintergrundfarbe aus der externen CSS-Datei abgerufen, wie aus der obigen Ausgabe ersichtlich ist.

Beispiel 2: Verwenden verschiedener CSS -Selektoren

Hier werden die CSS -Selektoren wie die Klasse und die ID eines Elements verwendet. Der !Wichtige Regel wird in der Klasse eines Elements angewendet.

Html

Willkommen bei LinuxHint!

Im obigen Code wird ein Absatz mit id = "para" und class = "cl" erstellt.

CSS

Der ".cl ”Selector und die“#PARA”CSS -Selektoren versuchen, die Hintergrundfarbe des

Element. Beachten Sie, dass die !wichtig Regel wird auf die angewendet “.Cl”Selektor .

Ausgang

Obwohl der ID -Selektor eine höhere Priorität hat als der Klassenauswahl !wichtig Die Regel überschreibt die in der ID = verwendete Hintergrundfarbe Eigenschaft. “para”Selektor.

Abschluss

Der !Wichtige Regel ist in verschiedenen komplexen Szenarien sehr hilfreich, in denen mehrere externe und interne Stilblätter verwendet werden und Sie nur eine weitere CSS -Eigenschaft mit höchster Priorität hinzufügen möchten. Die Bedeutung des !Wichtiger Regel, dieser Beitrag enthält einen detaillierten Leitfaden zur Arbeit und Verwendung des !Wichtige Regel in CSS. Die Verwendung der Verwendung !Wichtige Regel wird veranschaulicht, indem Sie es auf verschiedenen CSS -Selektoren ausüben und beobachten, dass sie die relevante CSS -Eigenschaft außer Kraft setzen, die von anderen CSS -Selektoren verwendet wird.