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.

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.

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.

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.

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.

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.

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.

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.

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!