Der Kindselektor in CSS

Nehmen wir an, wir haben den folgenden Code:

html<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:

cssp 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:

cssp > i {
  color: red;
}

Das Ergebnis der Codeausführung:

html<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>