Verstehen Sie die Verwendung von !important in CSS genau

Dieser Artikel konzentriert sich auf die Priorität von CSS-Stilen und spricht hauptsächlich über CSS! Wie man wichtiges verwendet, können Freunde, die dieses Wissen erlernen, einen Blick darauf werfen, ich hoffe, es wird Ihnen hilfreich sein!

!important bietet Entwicklern eine Möglichkeit, die Gewichtung von Stilen zu erhöhen. Es ist zu beachten, dass !important eine Deklaration des gesamten Stils ist, einschließlich der Attribute und Attributwerte dieses Stils

<style type="text/css">
a{color:green!important;}
#main a{ color:blue;}
</style>
<div id="main">
<a>!important实例</a>
</div>

Wenn für den obigen Code das wichtige Attribut nicht hinzugefügt wird, wird die Farbe des Der Hyperlink ist blau, aber nach dem Hinzufügen von „Wichtig“ wird die Priorität erhöht und die Anzeigefarbe ist grün.

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>

Die erste Zeile des CSS-Codes setzt die Schriftfarbe aller Divs im Feld auf Rot. Die zweite und dritte Zeile verwenden beide Klassen, um die Schriftfarbe ihrer eigenen Divs auf Blau umzudefinieren. wichtig wird am Ende der zweiten Zeile und ! in der dritten Zeile verwendet!
Standardmäßig ist die Priorität der Klasse niedriger als die der ID. Selbst wenn Sie die Klasse verwenden, um Ihren eigenen Stil in der zweiten Zeile neu zu definieren, wird diese Textzeile nicht wirksam, wenn Sie das übergeordnete Attribut erben immer noch rot!
In der dritten Zeile wird jedoch important verwendet, um die Priorität zu erhöhen (oder als erzwungene Neudefinition angesehen), sodass das CSS hier wirksam wird und diese Textzeile blau wird!

Eine weitere erwähnenswerte Sache ist, dass, wenn der Stil so geschrieben ist:

.testClass{ 
color:blue !important; color:red;
}

Diese Schreibweise wird in IE6 nicht erkannt, wichtig wird in Rot angezeigt, Sie können aber auch Folgendes verwenden Methode, um IE6 erkannt zu machen !important

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Verwendung von !important in CSS genau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!