suchen

Heim >Web-Frontend >CSS-Tutorial >CSS -Selektoren: Kombinatoren

CSS -Selektoren: Kombinatoren

Joseph Gordon-Levitt
Joseph Gordon-LevittOriginal
2025-02-19 11:14:11486Durchsuche

CSS -Selektoren: Kombinatoren

Key Takeaways

  • CSS -Selektoren übereinstimmen Regeln mit Elementen, wobei die Spezifikationen der Selektoren Level 3 und Level 4 mehrere neue Selektoren einführen. Dazu gehören neue Attribut-Selektoren und -kombinatoren sowie eine Reihe neuer Pseudoklassen.
  • Kombinatoren sind Zeichensequenzen, die eine Beziehung zwischen den Selektoren auf beiden Seiten ausdrücken. Dazu gehören der Nachkommenskombinator (Whitespace), Child Combinator (>), benachbartes Geschwisterkombinator () und allgemeiner Geschwisterkombinator (~).
  • Der Nachkommenskombinator wählt alle Elemente aus, die Nachkommen eines bestimmten Elements sind. Der untergeordnete Kombinator wählt alle Elemente aus, die direkte Kinder eines bestimmten Elements sind, der benachbarte Geschwisterkombinator wählt alle Elemente aus, die die nächsten Geschwister eines bestimmten Elements sind und sind Der allgemeine Geschwisterkombinator wählt alle Elemente aus, die Geschwister eines bestimmten Elements sind.
  • CSS-Kombinatoren können mit Pseudoklassen und Attributauswahlern kombiniert werden, und sie können verwendet werden, um verschachtelte Elemente zu stylen. Sie haben jedoch selbst keine Spezifität; Sie tragen nur dazu bei, die Spezifität eines Selektors zu bestimmen, indem sie die Beziehung zwischen Elementen definieren.

CSS -Regeln werden mit Elementen mit Selektoren übereinstimmen. Es gibt eine Reihe von Möglichkeiten, dies zu tun, und Sie sind wahrscheinlich mit den meisten von ihnen vertraut. Elementtyp, Klassenname, ID und Attribut-Selektoren sind alle gut unterstützten CSS-Selektoren und weit verbreitet.

Die Spezifikationen der Selektoren Level 3 und Level 4 haben mehrere neue Selektoren eingeführt. In einigen Fällen sind dies neue Variationen vorhandener Typen. In anderen Fällen sind sie neue Merkmale der Sprache.

In diesem Kapitel werden wir uns mit der aktuellen Browser -Landschaft für CSS -Selektoren befassen, mit Schwerpunkt auf neueren Selektoren. Dies beinhaltet neue Attribut-Selektoren und -kombinatoren sowie eine Reihe neuer Pseudoklassen. Im Abschnitt Auswahl der Selektoren mit Bedacht betrachten wir das Konzept der Spezifität.

Dieses Kapitel hört auf, alle Selektoren ein umfassender Blick zu sein - das könnte ein Buch für sich sein. Stattdessen konzentrieren wir uns auf Selektoren mit guter Browserunterstützung, die wahrscheinlich in Ihrer aktuellen Arbeit nützlich sind. Einige Materialien mögen alter Hut sein, aber es ist für den Kontext enthalten.

Tipp: Browserabdeckung für Selektoren

Ein umfassender Blick auf den aktuellen Stand der Browser-Unterstützung für Selektoren finden Sie in CSS4-Selektoren.

CSS -Selektoren: Kombinatoren

Folgendes ist ein Auszug aus unserem Buch CSS Master, geschrieben von Tiffany B. Brown. Kopien werden weltweit in Geschäften verkauft, oder Sie können es hier in eBook -Form kaufen.

Kombinators

Kombinatoren sind Zeichensequenzen, die eine Beziehung zwischen den Selektoren auf beiden Seiten ausdrücken. Die Verwendung eines Kombinators erzeugt einen sogenannten komplexen Selektor. Komplexe Selektoren können in einigen Fällen der prägnanteste Weg sein, um Stile zu definieren.

Sie sollten mit den meisten dieser Kombinatoren vertraut sein:

  • Nachkommenskombinator oder Whitespace -Zeichen

  • Kinderkombinator oder>

  • benachbartes Geschwisterkombinator oder

  • Allgemeines Geschwisterkombinator oder ~

veranschaulichen wir jeden dieser Kombinatoren. Wir werden sie verwenden, um dem unten gezeigten HTML -Formular Stile hinzuzufügen.

CSS -Selektoren: Kombinatoren

Dieses Formular wurde mit dem folgenden Stück HTML erstellt: 

<span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span>
</span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span>
</span><span><span><span><p</span>></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Payment<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></p</span>></span>
</span><span><span><span></fieldset</span>></span>
</span>
<span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span>
</span><span><span><span></form</span>></span></span>

Der Nachkommenskombinator

Sie sind wahrscheinlich mit dem Nachkommenskombinator vertraut. Es gibt es schon seit den frühen Tagen von CSS (obwohl es bis zum CSS2.1 ohne Typ war). Es wird weit verbreitet und stark unterstützt.

Der Nachkommenskombinator ist nur ein Whitespace -Charakter. Es trennt den übergeordneten Selektor von seinem Nachkommen und folgt dem Muster a b , wobei b ein Element ist, das durch a enthält. Fügen wir unserem Markup von oben einige CSS hinzu und sehen, wie dies funktioniert: 

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

Wir haben gerade die Farbe unseres Formentitels geändert, dessen Ergebnis unten zu sehen ist.

CSS -Selektoren: Kombinatoren

Fügen wir einige weitere CSS hinzu, diesmal, um die Größe unserer Preisnachricht zu erhöhen ("Tickets kosten jeweils 10 US -Dollar"): 

<span>form p {
</span><span>font-size: 22px;
</span><span>}</span>

Es gibt jedoch ein Problem mit diesem Selektor, wie Sie unten sehen können. Wir haben tatsächlich die Größe des Textes in allen der Absätze unserer Form erhöht, was wir nicht wollen. Wie können wir das beheben? Versuchen wir den Kinderkombinator.

CSS -Selektoren: Kombinatoren

Der Kinderkombinator

im Gegensatz zum Nachkommenskombinator wählt der Kinderkombinator (>) nur die sofortigen Kinder eines Elements aus. Es folgt dem Muster a> b , der zu jedem Element b entspricht, wobei a der unmittelbare Vorfahr ist.

Wenn Elemente Menschen wären, um eine Analogie zu verwenden, würde der Kinderkombinator mit dem Kind des Mutterelements übereinstimmen. Aber der Nachkommenskombinator würde auch mit ihren Enkelkindern und Urenkelkindern zusammenpassen. Ändern wir unseren vorherigen Selektor, um den Kinderkombinator zu verwenden: 

<span>form <span>> p</span> {
</span><span>font-size: 22px;
</span><span>}</span>

Jetzt sind nur die direkten Kinderkinder betroffen, wie unten gezeigt.

CSS -Selektoren: Kombinatoren

Der angrenzende Geschwisterkombinator

Mit dem benachbarten Geschwisterkombinator () können wir Elemente auswählen, die sich folgen und das gleiche übergeordnete übergeordnet haben. Es folgt dem Muster a b . Stile werden auf b Elemente angewendet, die sofort vorgehen a Elemente.

Kehren wir zu unserem Beispiel zurück. Beachten Sie, dass unsere Etiketten und Eingaben nebeneinander sitzen. Das bedeutet

<span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span>
</span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span>
</span><span><span><span><p</span>></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Payment<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></p</span>></span>
</span><span><span><span></fieldset</span>></span>
</span>
<span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span>
</span><span><span><span></form</span>></span></span>

Sie können die Ergebnisse unten sehen.

CSS -Selektoren: Kombinatoren

schauen wir uns ein anderes Beispiel an, das den Universal Selector (*) mit einem Typ -Selektor kombiniert: 

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

Dieses Beispiel fügt oben und unten in jedem Feldersetelement einen Rand von 5EM hinzu, der unten gezeigt ist. Da wir den Universal Selector verwenden, müssen Sie sich keine Sorgen machen, ob das vorherige Element ein anderes Felder oder ein P -Element ist.

CSS -Selektoren: Kombinatoren

Hinweis: Weitere Verwendungen des angrenzenden Geschwisterauswahls

Heydon Pickering untersucht clevere Verwendungen des benachbarten Geschwisterauswahl in seinem Artikel „Axiomatische CSS und lobotomierte Eulen“.

Was ist, wenn wir ein Geschwisterelement stylen wollen, das nicht wie bei unserer Anzahl der Tickets des Tickets nicht an einen anderen ist? In diesem Fall können wir den allgemeinen Geschwisterkombinator verwenden.

der allgemeine Geschwisterkombinator

Mit dem allgemeinen Geschwisterkombinator - einer Tilde - können wir Elemente auswählen, die denselben Elternteil teilen, ohne zu prüfen, ob sie benachbart sind. Angesichts des Musters

a ~ b entspricht dieser Selektor alle b Elemente, denen ein a -Element vorgenommen wird, unabhängig davon, ob sie benachbart sind oder nicht.

Schauen wir uns das Feld der Anzahl der Tickets erneut an. Sein Markup sieht so aus: 

<span>form p {
</span><span>font-size: 22px;
</span><span>}</span>
Unser Eingabeelement folgt dem Etikettelement, aber dazwischen ist ein Spannelement. Da sich ein Spannelement zwischen Eingabe und Etikett befindet, arbeitet der angrenzende Geschwisterkombinator hier nicht. Wechseln wir unseren angrenzenden Geschwisterkombinator in einen allgemeinen Geschwisterkombinator: 

<span>form <span>> p</span> {
</span><span>font-size: 22px;
</span><span>}</span>
Jetzt sitzen alle unsere Eingangselemente auf einer separaten Zeile von ihren Etikettelementen, wie unten zu sehen ist.

CSS -Selektoren: Kombinatoren Die Verwendung des allgemeinen Geschwisterkombinators ist am praktischsten, wenn Ihnen die volle Kontrolle über das Markup fehlt. Andernfalls sollten Sie Ihr Markup besser anpassen, um einen Klassennamen hinzuzufügen. Denken Sie daran, dass der allgemeine Geschwisterkombinator in einer großen Codebasis einige unbeabsichtigte Nebenwirkungen erzeugen kann. Verwenden Sie also mit Sorgfalt.

häufig gestellte Fragen (FAQs) zu CSS -Selektoren und Kombinators

Was sind die verschiedenen Arten von CSS -Kombinatoren und wie funktionieren sie? Es gibt vier Arten von Kombinatoren in CSS: Nachkommenskombinator (Raum), Kinderkombinator (größer als Symbol>), benachbartes Geschwisterkombinator (plus Symbol) und allgemeiner Geschwisterkombinator (Tilde -Symbol ~). Der Nachkommenskombinator wählt alle Elemente aus, die Nachkommen eines bestimmten Elements sind. Der Kinderkombinator wählt alle Elemente aus, die direkte Kinder eines bestimmten Elements sind. Der angrenzende Geschwisterkombinator wählt alle Elemente aus, die die nächsten Geschwister eines bestimmten Elements sind. Der allgemeine Geschwisterkombinator wählt alle Elemente aus, die Geschwister eines bestimmten Elements sind.

Wie verwende ich den Kinderkombinator in CSS? . Es wird verwendet, um Elemente auszuwählen, die direkte Kinder eines bestimmten Elements sind. Wenn Sie beispielsweise alle

Elemente auswählen möchten, die direkte Kinder eines

-Elements sind, würden Sie es als "Div> p" schreiben. Dadurch werden die CSS -Stile nur auf die

Elemente angewendet, die direkte Kinder des

-Elements sind, nicht auf diejenigen, die tiefer verschachtelt sind. Ein Nachkommenskombinator? Ein Kinderkombinator (>) wählt nur die direkten Kinder eines bestimmten Elements aus, während ein Nachkommenskombinator (Raum) alle Nachkommen (Kinder, Enkelkinder usw.) eines bestimmten Elements auswählt. Beispielsweise wählt „Div> p“ nur die

Elemente aus, die direkte Kinder eines

-Elements sind, während „Div p“ alle

Elemente innerhalb des

-Elements auswählt, unabhängig davon, wie Tiefe sind sie verschachtelt. CSS wird durch das Symbol „“ dargestellt. Es wird verwendet, um ein Element auszuwählen, das sich direkt nach einem anderen bestimmten Element befindet, und beide Elemente teilen das gleiche übergeordnete. Wenn Sie beispielsweise ein

Element auswählen möchten, das direkt einem

-Element folgt, würden Sie es als "Div P" schreiben. Dadurch werden die CSS -Stile nur auf das

Element angewendet, das dem

-Element direkt folgt. Sie können mehrere CSS -Kombinatoren in einer einzigen Regel kombinieren, um spezifischere und komplexe Selektoren zu erstellen. Zum Beispiel können Sie den Kinderkombinator und den angrenzenden Geschwisterkombinator kombinieren, um ein Element auszuwählen, das sowohl ein direktes Kind als auch ein angrenzendes Geschwister bestimmter Elemente ist. Die Regel „Div> p p“ wählt ein

Element aus, das ein direktes Kind eines

-Elements ist und auch direkt einem anderen

Element folgt.

Was ist der allgemeine Geschwisterkombinator in CSS?

Der allgemeine Geschwisterkombinator in CSS wird durch das Symbol „~“ dargestellt. Es wird verwendet, um Elemente auszuwählen, die Geschwister eines bestimmten Elements sind. Im Gegensatz zum angrenzenden Geschwisterkombinator wählt der allgemeine Geschwisterkombinator alle Elemente aus, die Geschwister eines bestimmten Elements sind, nicht nur die, die ihm direkt folgt. Beispielsweise wählt „Div ~ p“ alle

Elemente aus, die Geschwister eines

-Elements sind. >

CSS -Kombinatoren können sehr nützlich sein, um verschachtelte Elemente zu stylen. Sie können beispielsweise den Nachkommenskombinator verwenden, um alle

Elemente innerhalb eines

-Elements zu stylen, indem Sie „Div P“ schreiben. Sie können den Kinderkombinator auch verwenden, um nur die direkten Kinder eines Elements zu stylen, indem Sie „div> p“ schreiben. Durch Kombination verschiedener Kombinatoren können Sie sehr spezifische Selektoren erstellen, die genau auf die Elemente abzielen, die Sie stylen möchten. Verwenden Sie CSS-Kombinatoren mit Pseudoklassen. Sie können beispielsweise den Kinderkombinator mit der Pseudoklasse für die erste Kindheit verwenden, um das erste Kind eines bestimmten Elements auszuwählen. Die Regel „Div> p: Erst-Kind“ wählt das erste

Element aus, das ein direktes Kind eines

-Elements ist. ?

CSS -Kombinatoren selbst haben keine Spezifität. Sie tragen jedoch dazu bei, die Spezifität eines Selektors durch Definition der Beziehung zwischen Elementen zu bestimmen. Die Spezifität eines Selektors wird basierend auf der Anzahl der ID -Selektoren, Klassenauswahl und Typ -Selektoren berechnet. Ein Selektor mit spezifischeren Selektoren überschreibt einen Selektor mit weniger spezifischen Selektoren. Sie können beispielsweise den untergeordneten Kombinator mit einem Attributauswahl verwenden, um Elemente mit einem bestimmten Attribut auszuwählen und direkte Kinder eines bestimmten Elements. Die Regel „Div> p [title]“ wählt alle

Elemente mit einem Titelattribut aus und sind direkte Kinder eines

-Elements.

Das obige ist der detaillierte Inhalt vonCSS -Selektoren: Kombinatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css less html express define if for while select include try using class Attribute number symbol function this margin input Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ELEMENTETRAGE HEUTE HEUTE VERWENDUNG DER EQCSSNächster Artikel：ELEMENTETRAGE HEUTE HEUTE VERWENDUNG DER EQCSS

In Verbindung stehende Artikel

Mehr sehen