Heim >Web-Frontend >HTML-Tutorial >Detaillierte Erklärung der Symbole !important, *, _ in CSS-Stilen
Dieser Artikel enthält hauptsächlich relevante Informationen zur detaillierten Erklärung der Symbole !important, * und _ in CSS-Stilen. Ich hoffe, dieser Artikel kann allen Freunden in Not helfen.
Ausführlich Erklärung von CSS Die Symbole !important, *, _ im Stil
!important, *, _ sind eigentlich nutzlos. Sie werden alle verwendet, um die Priorität des Stils festzulegen, aber Sie können sie arrangieren Legen Sie die Priorität des Stils selbst fest, aber Sie müssen ihn trotzdem verstehen.
Wir wissen, dass an verschiedenen Stellen geschriebenes CSS unterschiedliche Prioritäten hat. Die Definition in der CSS-Datei ist das <-Attribut im Elementstil, aber wenn Sie !important verwenden, werden die Dinge anders.
Schauen wir uns zunächst den folgenden Code an:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>!Important</title> </head> <body> <p style="color:blue !important;color:red;"> 呵呵 </p> </body> </html>
Das Wort „haha“ wird ursprünglich mit zwei Farben nach color:red und color:blue definiert Wörter sollten rot sein. Standardmäßig wird die Farbe verwendet, die der Schriftart am nächsten kommt. Allerdings wird !important nach color:blue hinzugefügt, sodass color:blue die höchste Priorität haben sollte . Der spezifische Effekt ist wie folgt:
background:orange;*background:green;_background:blue;Sie können auch IE6, IE7 und Firefox unterscheiden:
background:orange;*background:green !important;*background:blue;Der folgende Code:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>!Important</title> </head> <body> <p style="background:orange;*background:green !important;*background:blue;"> 区分IE7、IE8、火狐 </p> <p style="background:orange;*background:green;_background:blue;"> 区分IE7、IE8、火狐 </p> </body> </html>Der laufende Effekt ist wie folgt: (1) IE7
(2) Durchsuchen von IE8 und höher Geräte, einschließlich Firefox usw.
(3) IE6
Ein solcher Unterschied kann jedoch nur zum Debuggen verwendet werden, die eigentliche Front- Die Endprogrammierung sollte weiterhin JavaScript verwenden, um Browser zu identifizieren und die Typen dieser Browser zu bestimmen.
Abschließend möchte ich hinzufügen, dass IE6 den Stil von !important einfach nicht erkennen kann, wenn der Code wie folgt lautet:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试Css中的!Important区别</title> <style type="text/css"> .testClass{ color:blue !important; } </style> </head> <body> <p class="testClass" style="color:red;"> 测试Css中的Important </p> </body> </html>Die Leistung ist konsistent, egal ob in ie6-. 10 oder Firefox und Chrome werden alle blau angezeigt. Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:
Detaillierte Erklärung der Position in IE6: Problem behoben
Beispiel für das Front-End, das den Rückgabewert von http erhält Statuscode 400_ Grundlegendes Tutorial
JavaScript-Speicherverlustproblem in Versionen vor IE9 (detaillierte Zusammenfassung)
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Symbole !important, *, _ in CSS-Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!