CSS -Kombinatorauswahl | Erklärt

Kombinatoren in CSS beschreiben die Beziehung zwischen bestimmten Elementen und auf der Grundlage dieser Beziehung können Sie Elemente stylen. Dies ist praktisch, wenn Sie bestimmte Elemente auf einmal stylen möchten, anstatt Elemente einzeln zu stylen. Beispiel. Die CSS -Kombinatorauswahl sind wie folgt.

1. Nachkommenswähler
2. Kinderauswahl
3. Angrenzender Geschwisterauswahl
4. Allgemeiner Geschwisterauswahl

All dies wird hier ausführlich erklärt.

Nachkommenswähler

Zum Zweck der Auswahl aller Nachfolger eines Elements wird der Nachkommenswählte verwendet. Zu den Nachfolgern zählen alle Kinder eines Elements, darf es ein direktes Kind oder ein Kind mehrfach im Dom -Baum sein. Es wird unter Verwendung eines Raums zwischen dem übergeordneten und dem untergeordneten Element dargestellt.

Syntax

Elternkind
Eigentumswert;

Beispiel

Das folgende Beispiel zeigt die Arbeit des Nachkommenswählers.

Html

Ich bin Nachfolger der Div.

Ich bin auch ein Nachfolger der Div.

Ich bin kein Nachfolger der Div.

Im obigen HTML -Code haben wir ein Element erstellt und zwei verschachtelt

Elemente in diesem Div. Außerdem haben wir auch eine geschaffen

Element außerhalb des Elements.

CSS

div
Polsterung: 5px;
Grenze: 2px solide Schwarz;

div p
Hintergrundfarbe: Pink;

Hier geben wir zuerst etwas Polsterung und Rand für die DIV und danach den Nachkommenskombinator mit einer rosa Hintergrundfarbe für den gesamten Nachkommen vergeben

Elemente der Div.

Ausgang

Die Nachfolger des Elements werden in Pink hervorgehoben.

Kinderauswahl

Wie der Name schon sagt, wählt der Kinderkombinator alle Kinder eines Elements aus. Es unterscheidet sich von dem Nachkommenswähler in einer Weise, dass es nur die direkten Kinder eines Elements auswählt. Darüber hinaus wird es durch ein größeres (>) Zeichen dargestellt.

Syntax

Eltern> Kind
Eigentumswert;

Beispiel

Wir werden ein ähnliches Beispiel wie das oben genannte verwenden, um die Funktionsweise des Child Combinator -Selektors zu demonstrieren.

Html

Dies ist ein unmittelbares Kind.

Dies ist auch ein unmittelbares Kind.

Da ich im Abschnittselement anwesend bin, bin ich ein Nachkomme der DIV, aber kein direktes Kind.

Ich bin kein Kind.

Ich bin auch kein Kind.

Hier haben wir eine DIV geschaffen und zwei verschachtelt

Elemente und ein Element im Div. Das Tag nistet weiter a

Element. Neben diesen zwei weiteren

Elemente werden erzeugt, aber außerhalb der Div.

CSS

div
Polsterung: 5px;
Grenze: 2px solide Schwarz;

div> p
Hintergrundfarbe: Hotpink;

Wir verwenden den Kinderkombinator, um der direkten Hotpink -Farbe eine Hotpink -Farbe zu verleihen

Kinder von DIV haben wir außerdem etwas Polsterung und Grenze für die DIV zur Verfügung gestellt.

Ausgang

Der Child Combinator Selector funktioniert ordnungsgemäß.

Angrenzender Geschwisterauswahl

Dieser Selektor wird zum Zwecke des Stylings der angrenzenden Geschwister verwendet. Es wird durch die Verwendung eines Plus -Zeichens (+) zwischen den beiden Elementen dargestellt.

Syntax

Element + Element
Eigentumswert;

Beispiel

Angenommen, Sie möchten a stylen wollen

Element, das ein angrenzendes Geschwister des Elements ist.

Html

Ich bin ein unmittelbares Kind.

Ich bin auch ein unmittelbares Kind.

Ich bin ein angrenzendes Geschwister.

Ich bin kein angrenzendes Geschwister.

Um die Arbeit des angrenzenden Geschwisterkombinators zu demonstrieren, haben wir einige erstellt

Elemente innerhalb und außerhalb eines Elements.

CSS

div
Polsterung: 5px;
Grenze: 2px solide Schwarz;

div + p
Farbe lila;
Schriftstil: kursiv;
Schriftdicke: fett;

Mit dem angrenzenden Geschwisterauswahl geben wir dem benachbarten Gebiet die lila Farbe, einen kursiven Schriftstil und das kräftige Schriftgewicht

Geschwister der Div.

Ausgang

Das angrenzende Geschwister des DIV -Elements wurde unter Verwendung des angrenzenden Geschwisterkombinators gestaltet.

Allgemeiner Geschwisterauswahl

Wie der Name schon sagt, enthält dieses CSS -Kombinator alle Geschwister eines Elements, das das gleiche übergeordnete übergibt. Es wird durch ein Tilde (~) Zeichen dargestellt.

Syntax

Element ~ Element
Eigentumswert;

Beispiel

Wir werden das Beispiel verwenden, das im obigen Abschnitt verwendet wird, um zu sehen, wie dieser Kombinator funktioniert.

CSS

div ~ p
Farbe lila;
Schriftstil: kursiv;
Schriftdicke: fett;

Mit dem allgemeinen Geschwisterauswahl geben wir allen einen Stil

Geschwister des DIV -Elements.

Ausgang

Alle allgemeinen Geschwister des DIV -Elements wurden erfolgreich gestaltet.

Abschluss

Ein CSS -Kombinatorauswahl auswählt Elemente für die Baiss ihrer Beziehung zu anderen Elementen. In CSS gibt es vier Kombinator -Selektoren. A Nachkommenswähler stiles alle Nachfolger eines Elements, a Kinderauswahl stiles die direkten Kinder eines Elements, und angrenzendes Geschwister Wähler stiles die Geschwister eines Elements, das direkt nach diesem Element kommt, und a Allgemeiner Geschwisterauswahl stiles alle Geschwister eines Elements. Dieser Beitrag beschreibt diese Kombinatoren im Detail zusammen mit geeigneten Beispielen.