Heim > Artikel > Web-Frontend > Zusammenfassung der Verwendung von !important in CSS

Zusammenfassung der Verwendung von !important in CSS

黄舟Original: 2017-07-27 11:30:022411Durchsuche

Das Folgende ist eine kurze Einführung in eines der wichtigeren !important-Attribute in CSS. Die folgenden zwei Punkte werden aus der Praxis des Autors zusammengefasst:

1. Wird verwendet, um die Abweichung des IE von bestimmten CSS-Spezifikationen zu beheben.

Beispielsweise unterscheidet sich der Effekt im IE immer um 2 Pixel von anderen Browsern wie Firefox, Opera usw., was dazu führt, dass das Seitenlayout falsch ausgerichtet ist. Dies wird durch einen Fehler in der Interpretation des Abstands zwischen IE verursacht Ja, wir können !important verwenden, um diese Situation zu lösen.

Zum Beispiel der folgende Stil

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

Wenn es sich um Firefox, Opera und Chrome handelt, unterstützen diese Browser das !important-Attribut, was bedeutet, dass sie den linken Rand festlegen: 20px standardmäßig! Wichtig; Diese Anweisung wird wirksam und die folgenden Stile ohne !important-Deklaration überschreiben sie nicht. Mit anderen Worten, sie hat die höchste Stufe und niemand unten kann mich ersetzen!

Aber was passiert, wenn Sie zum IE-Browser wechseln? Das heißt, der IE weiß nicht, was dieser Satz bedeutet, also überspringt der dumme IE diesen Satz kannte das untenstehende, also trat margin-left:40px;
in Kraft.

Apropos, eines muss beachtet werden:

Das bedeutet nicht, dass IE !important wirklich nicht kennt, wenn Sie !important nur zur Unterscheidung von IE verwenden möchten Andere Browser, dann liegen Sie falsch. Zum Beispiel:

.myclass{
backgroud-color:black !important;
}

Wir dachten aus heiterem Himmel, dass dieser Stil vom IE nicht erkannt wird und wir ihn für die Anzeige in anderen Browsern anpassen können. Ist das wirklich so? Nicht wirklich! IE hat es auch erkannt.

Sind Sie etwas verwirrt, wenn es darum geht? Erkennt IE das? ? ?

Die Antwort ist sehr einfach, wenn zwei Stile mit demselben Namen gleichzeitig erscheinen, wie folgt.

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

2 Wenn Sie beispielsweise nicht möchten, dass der Stil A in Zukunft überschrieben wird, können Sie auch !important verwenden. Und wenn der neue Stil auch !important verwendet, wird er dennoch zum Überschreiben von

.A{
 font-size:12px !important;
}
.A{
 font-size:14px;   //不会生效
}

.A{
 font-size:14px !important; //生效
}

Beachten Sie, dass es sich um einen Stil mit demselben Namen handeln muss, d >

In diesem Fall beträgt die Schriftgröße des Kindes 14 Pixel und wird vom Vater nicht beeinflusst.

<html>
<head>
<style>
.father{
font-size:12px !important;
}
.child{
font-size:14px;
}
</style>
<body>
<div class="father">
 <div class="child">I am child </div>
</div>
</body>
</html>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS: !important Code-Sharing verwendenNächster Artikel：CSS: !important Code-Sharing verwenden

In Verbindung stehende Artikel

Mehr sehen