Analyse zu Gewicht, Kaskadierung und Wichtigkeit (!important) in CSS

Im Folgenden finden Sie eine kurze Diskussion über die Bedeutung von CSS-Gewichten und Kaskadierung (!important). Der Inhalt ist recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

1. Spezifisches Gewicht

Manchmal legen wir unterschiedliche CSS-Stilcodes für dasselbe Element fest, dann wird das Element aktiviert Welcher CSS-Stil? Schauen wir uns den folgenden Code an:

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Sowohl p als auch .first stimmen mit dem p-Tag überein. Welche Farbe wird also angezeigt? Grün ist die richtige Farbe, warum also? Dies liegt daran, dass der Browser anhand der Gewichtung bestimmt, welcher CSS-Stil verwendet werden soll, und der CSS-Stil mit der höheren Gewichtung verwendet wird.

Im Folgenden sind die Gewichtsregeln aufgeführt:

Das Gewicht des Etiketts beträgt 1, das Gewicht des Klassenselektors beträgt 10 und das Gewicht des ID-Selektors beträgt bis zu 100 . Zum Beispiel der folgende Code:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

Hinweis: Es gibt auch ein spezielles Gewicht – die Vererbung hat auch ein Gewicht, aber es ist sehr niedrig, dass es nur 0,1 ist Es kann als Vererbung mit dem geringsten Gewicht verstanden werden.

2. Kaskadierung

Wenn es mehrere CSS-Stile für dasselbe Element in der HTML-Datei geben kann und was sollte ich das tun, wenn diese mehreren CSS-Stile den gleichen Gewichtungswert haben? Nun, die Kaskadierung in diesem Abschnitt hilft Ihnen, dieses Problem zu lösen.

Kaskadierung bedeutet, dass es in der HTML-Datei mehrere CSS-Stile für dasselbe Element geben kann. Wenn Stile mit derselben Gewichtung vorhanden sind, wird dies anhand der Reihenfolge dieser CSS bestimmt Stile Der letzte CSS-Stil wird angewendet.

Wie im folgenden Code gezeigt:

p{color:red;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Schließlich wird der Text in p auf grün gesetzt. Es versteht sich, dass der spätere Stil den vorherigen überschreibt Stil.

Daher ist die vorherige CSS-Stilpriorität nicht schwer zu verstehen:

Inline-Stylesheet (im Tag)> Eingebettetes Stylesheet (in der aktuellen Datei)> ; Externes Stylesheet (in externer Datei) .

3. Wichtigkeit

Wenn wir Webseitencode erstellen, gibt es einige besondere Situationen, in denen wir mit Sicherheit die höchste Gewichtung festlegen müssen Stile, was tun? Zu diesem Zeitpunkt können wir !important verwenden, um das Problem zu lösen.

Der folgende Code:

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Zu diesem Zeitpunkt wird der Text im p-Absatz in Rot angezeigt.

Hinweis: !important sollte vor dem Semikolon geschrieben werden

Beachten Sie hier, dass der Webseitenersteller dies nicht festlegt Der CSS-Stil: Der Browser zeigt Webseiten gemäß seinen eigenen Stilen an. Und Benutzer können im Browser auch ihre eigenen benutzerdefinierten Stile festlegen. Einige Benutzer sind es beispielsweise gewohnt, die Schriftgröße auf eine größere Größe einzustellen, damit sie den Text der Webseite klarer sehen können. Achten Sie zu diesem Zeitpunkt auf die Stilpriorität: Browser-Standardstil< Vom Benutzer festgelegter Stil, aber denken Sie daran, dass der !important-Prioritätsstil eine Ausnahme darstellt und eine höhere Gewichtung hat als der Benutzereigener Stilsatz.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Lösung des Problems, dass die Berechnung in CSS3 berechnet wird, wenn weniger kompiliert wird

Über CSS3-Analyse des Unterschieds zwischen Animationsattributen Transformation und Übergang und Animationsattributen

Das obige ist der detaillierte Inhalt vonAnalyse zu Gewicht, Kaskadierung und Wichtigkeit (!important) in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!