CSS-Selektoren im Detail

CSS3-Basisselektor

Um das Problem besser zu veranschaulichen, erstellen Sie zunächst eine einfache DOM-Struktur wie folgt:

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

1. Platzhalter-Selektor (*)
Der Platzhalter-Selektor wird verwendet, um alle Elemente oder alle Elemente unter einem bestimmten Element auszuwählen. Zum Beispiel:

Der Code lautet wie folgt:
*{ marigin: 0; padding: 0; }
Sie müssen den obigen Code in der Reset-Style-Datei gesehen haben ist das alle Elemente Der Rand und die Polsterung sind beide auf 0 gesetzt. Die andere besteht darin, alle Elemente unter einem bestimmten Element auszuwählen:

Der Code lautet wie folgt:

.demo * {border: 1px durchgehend blau;}

2. Elementselektor (E)
Der Elementselektor ist der gebräuchlichste und grundlegendste Selektor unter den CSS-Selektoren. Elementselektoren sind eigentlich Elemente des Dokuments, wie etwa html, body, p, div usw. In unserer Demo zum Beispiel: Zu den Elementen gehören div, ul, li usw.

Der Code lautet wie folgt:

li {background-color: grey;color: orange;}

3. Klassenauswahl (.className )
Der Klassenselektor gibt den Stil unabhängig vom Dokumentelement an. Bevor Sie den Klassenselektor verwenden, müssen Sie den Klassennamen für das HTML-Element definieren Der Name ist im HTML-Tag vorhanden, damit die Klasse ausgewählt werden kann:

2

", fügen wir li einen Klassennamen hinzu, damit Klassenselektoren ordnungsgemäß funktionieren und es einfacher wird, Klassenselektorstile mit Elementen zu verknüpfen.

.important {Schriftstärke: fett; Farbe: gelb;}
Der obige Code bedeutet, dem Element mit dem wichtigen Klassennamen einen Stil „Schriftstärke: fett, Farbe: gelb“ hinzuzufügen ;
Der Klassenselektor kann auch mehrere Klassennamen haben. Wir haben oben auch gesehen, dass es in unserem li-Element zwei oder mehr Klassennamen gibt, die durch Leerzeichen getrennt sind Verwenden Sie mehrere Klassennamen. Klassen sind miteinander verbunden, z. B.:

Der Code lautet wie folgt:

.important {font-weight:bold;}

.active {Farbe: grün;Hintergrund: Limette;}
.items {Farbe: #fff;Hintergrund: #000;}
.important.items {Hintergrund:#ccc;}
.first.last {color: blue;}

Wie im obigen Code gezeigt, funktioniert der Selektor „.important.items“ nur für Elemente, die sowohl die Klassen „important“ als auch „items“ enthalten Browser Klassenselektoren werden unterstützt, Mehrklassenselektoren (.className1.className2) werden jedoch von ie6 nicht unterstützt.

5. Nachkommenselektor (Ｅ F)

Nachkommenselektor wird auch als enthaltender Selektor bezeichnet. Seine Funktion besteht darin, die Nachkommenelemente eines bestimmten Elements auszuwählen, zum Beispiel: E F, bevor E ist Das Vorfahrenelement und F ist das Nachkommenelement. Dies bedeutet, dass alle Nachkommen-F-Elemente des E-Elements ausgewählt werden. Bitte beachten Sie, dass sie durch ein Leerzeichen getrennt werden müssen. Hier wird F unabhängig davon ausgewählt, ob es sich um ein untergeordnetes Element oder ein untergeordnetes Element des E-Elements oder um eine tiefere Beziehung handelt. Mit anderen Worten, unabhängig davon, wie viele Beziehungsebenen F in E hat, wird es ausgewählt:

.demo li {color: blue;}

Das Obige bedeutet, dass alle li-Elemente in div.demo ausgewählt sind

6. Auswahl für untergeordnete Elemente (E>F)

Der untergeordnete Elementselektor kann nur die untergeordneten Elemente eines bestimmten Elements auswählen, wobei E das übergeordnete Element und F das untergeordnete Element ist. F bedeutet, dass alle untergeordneten Elemente F unter dem E-Element ausgewählt werden. Dies unterscheidet sich vom Nachkommenselektor (EF), bei dem F ein Nachkommenelement von E ist, und vom Unterelementselektor E > F, bei dem F nur ein Unterelement von E ist.

ul > li {Hintergrund: grün;Farbe: gelb;} Der Code auf
gibt an, dass alle Unterelemente li unter ul ausgewählt sind. Beispiel:
IE6 unterstützt keine Selektoren für untergeordnete Elemente.

7. Selektor für benachbarte Geschwisterelemente (E + F)

Der Selektor für benachbarte Geschwisterelemente kann Elemente auswählen, die unmittelbar auf ein anderes Element folgen, und sie haben in anderen das gleiche übergeordnete Element Mit anderen Worten, die beiden EF-Elemente haben das gleiche übergeordnete Element und das F-Element befindet sich hinter dem E-Element und angrenzend, sodass wir den Selektor für benachbarte Geschwisterelemente verwenden können, um das F-Element auszuwählen.

Der Code lautet wie folgt:

li + li {Hintergrund: grün;Farbe: gelb; Rand: 1px einfarbig #ccc;}

Der obige Code zeigt an, dass das benachbarte Element li von li ausgewählt ist. Wir haben hier insgesamt zehn li, sodass der obige Code das 2. li bis zum 10. li auswählt, also insgesamt neun

IE6 Unterstützt diesen Selektor nicht

8. Universeller Geschwisterelementselektor (Ｅ～Ｆ)

Der universelle Geschwisterelementselektor ist ein neuer Selektor, der zu CSS3 hinzugefügt wurde. Dieser Selektor wählt alle Geschwisterelemente hinter einem Element aus. Sie ähneln auch benachbarten Geschwisterelementen und müssen sich im selben übergeordneten Element befinden. Mit anderen Worten, die E- und F-Elemente gehören zum selben übergeordneten Element, und das F-Element steht nach dem E-Element, dann ist E ~ F Der Selektor wählt alle F-Elemente aus, die auf das E-Element folgen. Beispielsweise der folgende Code:

Der Code lautet wie folgt:

.active ~ li {Hintergrund: grün;Farbe: gelb; Rand: 1px solid #ccc;🎜>

Der obige Code stellt dar, dass das Element hinter dem li.active-Element ausgewählt ist . Alle Geschwisterelemente li

9. Gruppenselektor (Selektor1, Selektor2,...,SelektorN)

Gruppenselektor ist ein Element, das den gleichen Gruppenstil hat zusammen und verwenden Sie Kommas ",", um die einzelnen Selektoren zu trennen, wie oben gezeigt, Selektor1, Selektor2,..., SelektorN. Dieses Komma teilt dem Browser mit, dass die Regel mehrere verschiedene Selektoren enthält. Wenn das Komma weggelassen wird, ist dies der Punkt, den wir zuvor erwähnt haben.

Eine ausführlichere Einführung in CSS-Selektoren und verwandte Artikel finden Sie auf der chinesischen PHP-Website!