Detaillierte Erklärung der Symbole !important, *, _ in CSS-Stilen-HTML-Tutorial-php.cn

Detaillierte Erklärung der Symbole !important, *, _ in CSS-Stilen

亚连

Freigeben： 2018-05-21 15:23:24

Original

1716 Leute haben es durchsucht

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>

Nach dem Login kopieren

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:

Allerdings erkennt IE6 das !important-Symbol im Stilattribut nicht und macht daher das Wort „haha“ immer noch rot die ursprüngliche Stilpriorität.

Die Symbole !important, * und _ in CSS-Stilen werden alle zum Festlegen von Prioritäten verwendet. Diese Symbole gelten jedoch nur in bestimmten Browsern wie folgt:

IE Alle können * erkennen; Standardbrowser (wie FF) können * nicht erkennen; IE6 kann * nicht erkennen,

IE7 kann * und !important nicht erkennen; erkennt *, kann aber !important;

Unterstrich „_“ erkennen, IE6 unterstützt Unterstreichungen, aber weder IE7 noch Firefox unterstützen Unterstreichungen.

Daher können Sie im Stilattribut die folgenden Attribute definieren, um IE6, IE7 und Firefox zu unterscheiden:

background:orange;*background:green;_background:blue;

Nach dem Login kopieren

Sie können auch IE6, IE7 und Firefox unterscheiden:

background:orange;*background:green !important;*background:blue;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!