CSS-Selektor „>': Wie zielt er auf untergeordnete Elemente ab?

` Selektor: Wie zielt er auf untergeordnete Elemente ab? " />

CSS '>' Selektor: Was macht es?

Das „>“ Der Selektor in CSS, auch „untergeordneter Selektor“ genannt, wird verwendet, um ein Element auszuwählen, das das unmittelbare untergeordnete Element eines anderen Elements ist. Im Klartext wählt er Elemente aus, die direkt in seinem übergeordneten Element verschachtelt sind.

So funktioniert es:

Um das „>“ zu verwenden Wenn Sie einen Selektor verwenden, platzieren Sie ihn einfach nach dem Selektor des übergeordneten Elements, wie im folgenden Beispiel gezeigt:

parent-element > child-element {
  ...
}

In diesem Code wird jedes Element mit der Klasse „child-element“ nur dann von den CSS-Regeln beeinflusst, wenn Es ist ein direkter Nachkomme eines Elements mit der Klasse „parent-element“.

Beispiel:

Überlegen die folgende HTML-Struktur:

<div class="outer">
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

Wenn Sie die folgende CSS-Regel auf diese Struktur anwenden:

.outer > .middle {
  border: 1px solid orange;
}

Der orangefarbene Rand wird nur auf die beiden „mittleren“ Divs angewendet Direkte Nachkommen des „äußeren“ Divs. Die „inneren“ Divs innerhalb dieser „mittleren“ Divs erhalten nicht den orangefarbenen Rand, da sie keine unmittelbaren Kinder des „äußeren“ Divs sind. div.

Das obige ist der detaillierte Inhalt vonCSS-Selektor „>': Wie zielt er auf untergeordnete Elemente ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!