Über die Verwendung des Größer-als-Zeichens in CSS-Stilen und die Vererbungsmethode in CSS

Vererbung bringt bestimmte Probleme mit unseren Programmen mit sich, daher sollten wir uns ernsthaft mit den Prinzipien der Vererbung befassen. Hier ist ein gutes Beispiel für eine Methode zum Umgang mit Vererbung.

Vererbung Bis zu einem gewissen Grad. Dies erleichtert den Schreibprozess des Programms, bringt jedoch manchmal auch bestimmte Probleme mit unserem Programm mit sich. Daher ist es wichtig, die Prinzipien der Vererbung und den Umgang damit sorgfältig zu studieren. Im Folgenden finden Sie eine Möglichkeit, die Vererbung in CSS zu handhaben.

Ich habe ein Größer-als-Zeichen (>) in einem CSS-Code gesehen. Der Code lautet wie folgt:

BODY#css-zen-garden > p#extrap2 { 
BACKGROUND-IMAGE:url(../images/bg_face.jpg); 
Z-INDEX: 2; 
POSITION: fixed; 
WIDTH: 205px; 
BOTTOM: 0px; 
BACKGROUND-REPEAT: no-repeat; 
BACKGROUND-POSITION: left bottom; 
HEIGHT: 594px; 
LEFT: 0px 
}

Was bedeutet das Größer-als-Zeichen in CSS?

Zum Beispiel: Es gibt eine p-Ebene, die mehrere Span-Tags enthält. Der Code lautet wie folgt:

<p> 
<span>亲人</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

Zu diesem Zeitpunkt , verwenden Sie CSS, um es zu definieren. Der Stil sollte wie folgt aussehen:

p span { 
font:10px; 
color:blue; 
}

Aber zu diesem Zeitpunkt muss das erste Span-Tag in einem anderen Stil angezeigt werden. und die Stile der letzten beiden 45a2772a6b6107b401db3c9b82c049c2-Tags bleiben unverändert. Was tun? Ist es in Ordnung, den ersten Span in ein p-Tag einzufügen? Der Code lautet wie folgt:

<p> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

Leider ist dies nicht möglich, da der Stil p span {...} auf allen Span-Tags unter p funktioniert Ebene. Es spielt keine Rolle, ob es sich um ein untergeordnetes Tag oder ein untergeordnetes Enkel-Tag handelt, der Stil funktioniert also weiterhin. Zu diesem Zeitpunkt wird das „Größer-als-Zeichen“ in CSS verwendet.

Jetzt ändern wir diesen Stil:

p > span { 
font:10px; 
color:blue; 
}

Auf diese Weise werden das erste Span-Tag und die anderen beiden angezeigt Es können verschiedene Stilrichtungen realisiert werden. Wir können also wissen, dass die Funktion des „Größer-als-Zeichens“ in CSS folgende ist: In verschachtelten Tags gilt der Stil nur für die Tags der Sohngeneration, nicht für die Tags der Enkelgeneration.

Aber es gibt immer noch eine solche Situation, der folgende Code:

<p> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

Funktioniert dieses „Größer-als-Zeichen“ zu diesem Zeitpunkt noch? ? Die Antwort lautet: Nein. Weil das Span-Tag dieses Enkelkindes den Span-Tag-Stil des Sohnes erbt.

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

Verwandte Empfehlungen:

Analyse der Vererbungsverwendung in CSS

Regeln von CSS-Stilen überschreiben

Das obige ist der detaillierte Inhalt vonÜber die Verwendung des Größer-als-Zeichens in CSS-Stilen und die Vererbungsmethode in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!