CSS Ableitungsselektoren

Abgeleiteter Selektor

Durch die Definition von Stilen basierend auf dem Kontextverhältnis eines Elements an seiner Position können Sie die Markierung einfacher gestalten.

In CSS1 wird der Selektor, der auf diese Weise Regelanwendungen anwendet, als Kontextselektor (contextual selectors) bezeichnet, da sie auf das Kontextverhältnis angewiesen sind, um eine oder eine Regel anzuwenden oder zu vermeiden. In CSS2 werden sie als abgeleitete Selektoren bezeichnet, aber egal wie Sie sie nennen, ihre Funktion ist die gleiche.

Abgeleitete Selektoren ermöglichen es Ihnen, die Stilisierung eines bestimmten Tags basierend auf dem Kontext des Dokuments zu bestimmen. Durch die vernünftige Nutzung von abgeleiteten Selektoren können wir den HTML-Code sauberer gestalten.

Zum Beispiel, wenn Sie möchten, dass das strong-Element in der Liste kursiv ist, anstatt wie üblich fett, können Sie einen abgeleiteten Selektor so definieren:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Bitte beachten Sie das Kontextverhältnis des blauen Codes, der als <strong> markiert ist:

<p><strong>Ich bin fett, aber nicht kursiv, weil ich nicht in der Liste enthalten bin, daher hat diese Regel keine Auswirkung auf mich.</strong></p>
<ol>
<li><strong>Ich bin kursiv. Das liegt daran, dass das strong-Element im li-Element enthalten ist.</strong></li>
<li>Ich habe den normalen Zeichensatz.</li>
</ol>

Im obigen Beispiel ist nur der strong-Element im li-Element in Kursivschrift, es ist nicht erforderlich, für das strong-Element eine besondere Klasse oder ID zu definieren, der Code ist daher einfacher.

Schauen wir uns die folgenden CSS-Regeln an:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Hier ist der HTML-Code, auf den es sich bezieht:

<p>Das stark betonte Wort in diesem Absatz ist<strong>rot</strong>.</p>
<h2Dieser Untertitel ist auch rot.</h2>
<h2>Das stark betonte Wort in diesem Untertitel ist<strong>blue</strong>.</h2>

Verwandte Inhalte

Wenn Sie tiefere Kenntnisse über Ableitungsselektoren erlernen möchten, lesen Sie bitte die folgenden Inhalte im fortgeschrittenen Tutorial von CodeW3C.com: