Ausführliche Erläuterung der Vererbung, Besonderheit, Kaskadierung und Wichtigkeit in CSS

1. Vererbung

Einige CSS-Stile werden vererbt. Was ist also Vererbung? Vererbung ist eine Regel, die es ermöglicht, Stile nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf seine Nachkommen anzuwenden. Zum Beispiel der folgende Code: Wenn eine bestimmte Farbe auf das p-Tag angewendet wird, gilt diese Farbeinstellung nicht nur für das p-Tag, sondern auch für den gesamten Unterelementtext im p-Tag, wobei das Unterelement der Span ist Etikett.

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

Dadurch werden sowohl der Text in p als auch der Text in span auf Rot gesetzt. Beachten Sie jedoch, dass einige CSS-Stile nicht vererbt werden. Beispiel: border:1px solid red;

p{border:1px solid red;}

Im obigen Beispiel besteht die Funktion des Codes lediglich darin, den Rand auf 1 Pixel, rot, und festzulegen Durchgezogene Grenzlinie für das p-Tag. Für das untergeordnete Element span hat dies jedoch keine Auswirkung.

2. Besonderheiten

Manchmal legen wir unterschiedliche CSS-Stilcodes für dasselbe Element fest. Welcher wird also für das Element aktiviert? über CSS-Stile? Schauen wir uns den folgenden Code an:

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

p und .first stimmen beide 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. Derjenige mit der höchsten Gewichtung verwendet den CSS-Stil.

Die folgenden Regeln gelten für Gewichtungen:

Das Gewicht des Etiketts beträgt 1, das Gewicht des Klassenselektors beträgt 10 und Das Gewicht des ID-Selektors beträgt 10. Der maximale Gewichtswert beträgt 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 eine besondere Gewichtung – die Vererbung hat auch eine Gewichtung, die jedoch in der Literatur sehr niedrig ist beträgt also nur 0,1 Es kann verstanden werden, dass das Vererbungsgewicht am niedrigsten ist.

3. Kaskadierung

Denken wir über ein Problem nach: Wenn es in einer HTML-Datei mehrere CSS-Stile für dasselbe Element geben kann 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-Stile bestimmt Das Ende wird angewendet.

Wie im folgenden Code gezeigt:

p{color:red;}   
p{color:green;}

Schließlich wird der Text in p auf grün gesetzt, was leicht zu verstehen ist dass die späteren Stile die vorherigen überschreiben.

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

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

4. 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 stehen

Beachten Sie hier, dass der Browser die Webseite gemäß seinem eigenen Stil anzeigt, wenn der Ersteller der Webseite den CSS-Stil nicht festlegt Reihe von Stilen. 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. Bitte beachten Sie, dass die Stilpriorität wie folgt lautet: Browser-Standardstil < der Benutzer.

Der obige Artikel geht kurz auf Vererbung, Besonderheit, Kaskadierung und Wichtigkeit in CSS ein. Dies ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie PHP-Chinesisch mehr unterstützen . netto.

Ausführlichere Erläuterungen zu Vererbung, Besonderheit, Kaskadierung und Wichtigkeit in CSS finden Sie auf der chinesischen PHP-Website!