Forschung zu CSS3-Selektoren

Attributauswahl

[Titel]: Wählen Sie das Element mit dem Titelattribut

aus

[title='hello']: Wählen Sie das Element aus, dessen Attribut „title“ und dessen Wert „hello“ ist

[title~='hello']: Wählen Sie ein Element aus, dessen Attribut „title“ ist und dessen Wert „hello“ ist. Es muss ein separater Wert sein, der durch Leerzeichen getrennt ist

[title*='hello']: Wählen Sie das Element aus, dessen Attribut title ist und hallo

enthält

[title|='hello']: Das ausgewählte Attribut ist title und der Wert beginnt mit hallo und jedes Zeichen gefolgt von - ist zulässig

[title^='hello']: Jedes Zeichen, dessen Attribut mit hallo

beginnt

[title$='hello']: Jedes Zeichen, dessen Attribut mit hallo endet

[title^='hello'][title$='.py']: Wählen Sie Elemente aus, deren Attribute mit hello beginnen und mit .py enden

Anschluss

h1~p: Wählen Sie alle p-Elemente derselben Ebene nach dem h1-Element

aus

p~p: Wählen Sie alle p-Elemente derselben Ebene nach dem p-Element aus, mit Ausnahme des ersten p-Elements

h1 p: Wählen Sie das erste gleichgeordnete p-Element nach dem h1-Element aus

Pseudoklassenselektor

n-te Reihe, Zahlen

nth-child(): Zählt nach Position

nth-of-type(): Zählt nach Typ

nth-last-child(): Zählt vom Ende nach Position

nth-last-of-type(): Zählt nach Typ vom Ende

Verwenden Sie (-n Zahl), um die ersten paar Elemente anzugeben, die ausgewählt werden sollen

-n erhöht sich in Richtung negativer Zahlen, beginnend mit 0, -1, -2, -3...

Verwenden Sie :nth-child(odd) oder :nth-child(even), um einen Interlaced-Farbwechsel zu erreichen.

Einzelauswahl

erstes untergeordnetes Element: Wählen Sie das erste Element nach Position aus.
erstes Kind: Wählen Sie das erste Element nach Typ aus

last-child: Wählen Sie das letzte Element nach Position aus.
last-of-type: Wählen Sie das letzte Element nach Typ aus

only-child: Wird ausgewählt, wenn keine anderen Geschwisterelemente vorhanden sind
only-of-type: Es können Geschwisterelemente vorhanden sein, diese müssen jedoch unterschiedlichen Typs sein

Mit der Verwendung von „only-of-type“ können Sie ein Element aus anderen Elementtypen auswählen, während „only-child“ erfordert, dass das Element alleine existiert. Das muss von großem Nutzen sein und muss noch entdeckt werden.

Pseudoklasse

:Ziel

1. Verwenden Sie:target, um Klickereignisse zu simulieren
2. 　
3. Ziel zum Wechseln der Registerkarten verwenden
4. Mithilfe der Ziel-Pseudoklasse können Sie ganz einfach die Kommentare hervorheben, die der Benutzer lesen möchte

Verwenden Sie die Tab-Umschaltung von Target. Natürlich weist sie noch viele Mängel auf, aber Sie können sie dadurch erweitern.

:empty
Wählt Elemente aus, die keine untergeordneten Elemente und keine Textknoten haben

:root
Wählen Sie das Root-Element aus. In HTML ist root immer das HTML-Element

:nicht
Parameter unterstützen die Übergabe eines Elements oder sogar anderer Pseudoklassenselektoren, unterstützen jedoch nicht die Übergabe von Konnektoren und Pseudoelementen.
Wählen Sie ein beliebiges Element außer den angegebenen Parametern aus

Elementstatus-Pseudoklasse

:aktiviert
Wenn das Kontrollkästchen aktiviert ist

:disabled
Wenn das Element deaktiviert ist

:enabled
Wenn das Element nicht deaktiviert ist

Pseudoelement

::first-line
Wählen Sie die erste Textzeile aus

::first-letter
Wählen Sie den ersten Buchstaben aus

::after
Fügen Sie am Ende des Elements ein Pseudoelement

hinzu

::before
Fügen Sie am Anfang des Elements ein Pseudoelement

hinzu

::selection
Auf den ausgewählten Text anwenden

Die ordnungsgemäße Verwendung dieser Selektoren kann Ihnen bei der Lösung vieler Probleme helfen. Es befindet sich noch in der Forschungsphase und der Inhalt dieses Artikels wird langfristig aktualisiert.