Der Kindselektor in CSS

Nehmen wir an, wir haben den folgenden Code:

<p>
	text <b><i>bold italic</i></b>
</p>
<p>
	text <i>just italic</i>
</p>

Nehmen wir an, wir möchten alle i-Tags auswählen, die Nachfahren von Absätzen sind. Tun wir das:

p i {
	color: red;
}

Das Ergebnis der Codeausführung:

Lassen Sie uns nun die i-Tags auswählen, die direkte Kinder unserer Absätze sind. Dabei hilft uns der Kindselektor >.

Um zu verstehen, wie man ihn benutzt, lassen Sie uns ihn mit dem Nachfahrenselektor vergleichen. So: p i - wir wählen alle kursive Schrift innerhalb von Absätzen aus, und so: p > i - nur kursive Schrift, die direkte Kinder der Absätze sind.

Wenden wir diesen Selektor auf unseren HTML-Code an:

p > i {
	color: red;
}

Das Ergebnis der Codeausführung:

Gegeben ist der folgende Code:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

Färben Sie nur die b-Tags rot ein, die direkte Kinder der li-Tags sind.