Wozu dient der hierarchische Selektor?

Wofür werden hierarchische Selektoren verwendet? Es werden bestimmte Codebeispiele benötigt.

Ein hierarchischer Selektor ist ein Selektor in CSS, der bestimmte Elemente durch die Beziehung zwischen Elementen auswählen kann. Zu den hierarchischen Selektoren gehören untergeordnete Selektoren, Nachkommenselektoren, benachbarte Geschwisterselektoren und allgemeine Geschwisterselektoren.

Der untergeordnete Selektor wird durch das Größer-als-Zeichen (>) dargestellt, das das direkte untergeordnete Element des ausgewählten Elements darstellt. Wählen Sie beispielsweise alle direkten untergeordneten Elemente der Klasse „Kind“ unter einem Element mit der Klasse „Eltern“ aus:

.parent > .child {
    //样式
}

Der Nachkommenselektor wird durch ein Leerzeichen dargestellt, um die Nachkommenelemente des ausgewählten Elements anzuzeigen. Wählen Sie beispielsweise alle Nachkommenelemente der Klasse Nachkomme unter einem Element mit der Vorfahrenklasse aus:

.ancestor .descendant {
    //样式
}

Der benachbarte Geschwisterselektor wird durch ein Pluszeichen (+) dargestellt, das angibt, dass die benachbarten Geschwisterelemente des ausgewählten Elements ausgewählt sind. Wählen Sie beispielsweise ein Element mit der Klasse element1 aus, gefolgt von einem Geschwisterelement mit der Klasse element2:

.element1 + .element2 {
    //样式
}

Der allgemeine Geschwisterselektor wird durch eine Tilde (~) dargestellt, um die allgemeinen Geschwisterelemente des ausgewählten Elements anzuzeigen. Wählen Sie beispielsweise alle folgenden Geschwisterelemente der Klasse element2 nach einem Element mit der Klasse element1 aus:

.element1 ~ .element2 {
    //样式
}

Mit einem hierarchischen Selektor können Zielelemente basierend auf der Beziehung zwischen Elementen ausgewählt werden, wodurch eine präzisere Stilsteuerung erreicht wird. Das Folgende ist ein spezifisches Codebeispiel:

HTML-Code:

<div class="parent">
    <div class="child">这是子元素1</div>
    <div class="child">这是子元素2</div>
</div>
<div class="ancestor">
    <div class="descendant">这是后代元素1</div>
    <div class="descendant">这是后代元素2</div>
</div>
<div class="element1">这是元素1</div>
<div class="element2">这是元素2</div>
<div class="element2">这是元素3</div>

CSS-Code:

.parent > .child {
    color: red;
}

.ancestor .descendant {
    font-size: 20px;
}

.element1 + .element2 {
    background-color: blue;
}

.element1 ~ .element2 {
    text-align: center;
}

Im obigen Code wird das direkte untergeordnete Element des Elements mit der übergeordneten Klasse über den untergeordneten Selektor ausgewählt (.parent > .child). Element und setzen Sie seine Schriftfarbe auf Rot. Verwenden Sie den Nachkommenselektor (.ancestor .descendant), um alle Nachkommenelemente der Klasse Nachkommen unter dem Element der Klasse Vorfahren auszuwählen und deren Schriftgröße auf 20 Pixel festzulegen. Verwenden Sie den benachbarten Geschwisterselektor (.element1 + .element2), um das Geschwisterelement der Klasse element2 auszuwählen, das unmittelbar auf das Element mit der Klasse element1 folgt, und legen Sie seine Hintergrundfarbe auf Blau fest. Verwenden Sie den allgemeinen Geschwisterselektor (.element1 ~ .element2), um alle nachfolgenden Geschwisterelemente der Klasse element2 auszuwählen, die dem Element mit der Klasse element1 folgen, und ihren Text in der Mitte anzuzeigen.

Durch die Verwendung hierarchischer Selektoren können wir HTML-Elemente flexibler auswählen. Durch die Kombination verschiedener hierarchischer Selektoren können wir verschiedene Stileffekte erzielen. Die Beherrschung der Verwendung hierarchischer Selektoren kann die Wartbarkeit und Lesbarkeit von CSS-Stilen verbessern und auch die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonWozu dient der hierarchische Selektor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!