[CSS-Hinweis 4] Vererbung, Kaskadierung und Besonderheit von CSS

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. Der Text in

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

p und der Text in span sind beide auf Rot gesetzt. Beachten Sie jedoch, dass einige CSS-Stile nicht vererbt werden. Zum Beispiel border:1px solid red;

p{border:1px solid red;}

In der dritten Klasse war ich noch so schüchtern wie eine Maus .

Im obigen Beispiel besteht die Funktion des Codes nur darin, den Rand für das p-Tag auf 1 Pixel, Rot und eine durchgezogene Randlinie festzulegen, hat jedoch keine Auswirkung auf das Sub -Elementspanne.

2. Besonderheit
Manchmal legen wir unterschiedliche CSS-Stilcodes für dasselbe Element fest. Welcher CSS-Stil wird also für das Element aktiviert? p{color:red;} .first{color:green;}

In der dritten Klasse war ich nochschüchtern wie ein Mäusemädchen.

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, 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 maximale Gewicht des ID-Selektors beträgt 100.

Zum Beispiel der folgende Code:

Hinweis: Es gibt auch eine besondere Gewichtung, die jedoch in der Literatur sehr niedrig ist Daher kann es so verstanden werden: Das vererbte Gewicht ist am niedrigsten.

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 .notep{color:yellow;} /*权值为100+10+1=111*/

3. Kaskadierung

Lassen Sie uns über eine Frage nachdenken: Was ist, wenn es in der HTML-Datei mehrere CSS-Stile für dasselbe Element geben kann und diese mehreren CSS-Stile denselben 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:

Schließlich wird der Text in p auf grün gesetzt. Es ist leicht zu verstehen, dass der spätere Stil überschrieben wird der bisherige Stil.

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

4. Wichtigkeit

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

Der folgende Code:

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

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

Hinweis: !important sollte vor dem Semikolon stehen

Beachten Sie hier, dass der Browser die Webseite entsprechend anzeigt, wenn der Ersteller der Webseite den CSS-Stil nicht festlegt zu seinen eigenen 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. Achten Sie zu diesem Zeitpunkt auf die vom Benutzer festgelegte Stilpriorität: Browser-Standardstil < Der vom Benutzer festgelegte Stil.

Das Obige ist der Inhalt von [CSS Notes 4] zur Vererbung, Kaskadierung und Besonderheit von CSS. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!