Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
CSS-Selektoren
DasCSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die dann eine Reihe von CSS-Regeln zusammen mit ihrerSpezifität angewendet werden. Das CSS-Selektoren-Modul bietet uns mehr als 60 Selektoren und fünf Kombinatoren.Andere Module bieten zusätzliche Pseudo-Klassen-Selektoren und Pseudo-Elemente.
Hinweis:Diese Seite führt in ein CSS-Modul ein. Um eine vollständige Liste aller Selektoren zu finden, die von CSS-Spezifikationen definiert werden, siehe dieSelektoren Referenzseite.
In CSS sind Selektoren Muster, die verwendet werden, um die Elemente abzugleichen oder auszuwählen, die Sie stilisieren möchten. Selektoren werden auch in JavaScript verwendet, um das Auswählen der DOM-Knoten zu ermöglichen, die alsNodeList zurückgegeben werden sollen.
Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen das Anvisieren von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren ermöglichen es, präziser zu sein, wenn Sie Elemente auswählen, indem sie die Auswahl von Elementen basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.
Referenz
Kombinatoren und Trennzeichen
+(Nachfolgender Geschwisterkombinator)>(Kind-Kombinator)~(Nachfolgende Geschwisterkombinator)- " " (Nachkomme-Kombinator)
|(Namensraum-Trennzeichen),(Selektorenliste)
Das CSS-Selektoren-Modul führt auch denSpaltenkombinator (||) ein. Derzeit unterstützen keine Browser diese Funktion.
Selektoren
:active:any-link:autofill:buffering:checked:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:in-range:indeterminate:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:link:matches()(veraltetes Legacy-Selector-Alias für:is()):modal:muted:not():nth-child():nth-of-type():nth-last-child():nth-last-of-type():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:root:scope:seeking:stalled:target:user-invalid,:user-valid,:valid,:visited,:volume-locked,:where(),:-webkit-Pseudo-Klassen,- Attributselektoren,
- Klassenselektor,
- ID-Selektoren,
- Typen-Selektoren,
- Universelle Selektoren
Das CSS-Selektoren-Modul führt auch die:blank,:current, und:local-link Pseudo-Klassen ein. Derzeit unterstützen keine Browser diese Funktionen.
Begriffe
Leitfäden
- CSS-Selektoren und Kombinatoren
Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die in den CSS-Selektoren und den CSS-Pseudo-Modulen definiert sind.
- CSS Selektorstruktur
Erklärung der Struktur der CSS-Selektoren und der im CSS-Selektoren-Modul eingeführten Begrifflichkeiten, von "einfacher Selektor" bis "verzeihende relative Selektorliste".
- Pseudo-Klassen
Liste der Pseudo-Klassen, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, definiert in den verschiedenen CSS-Modulen und HTML.
- Verwendung der
:target-Pseudo-Klasse in Selektoren Erfahren Sie, wie Sie die
:target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragment-Identifikators zu gestalten.- Datenschutz und der
:visited-Selektor Untersucht die Stilbeschränkungen, die aus Gründen des Datenschutzes auf die
:visited-Klasse angewendet werden.- CSS-Bausteine: CSS-Selektoren
Einführung in die grundlegenden CSS-Selektoren, einschließlich Tutorials zuTypen-, Klassen- und ID-Selektoren,Attributselektoren,Pseudo-Klassen und Pseudo-Elemente undKombinatoren.
- Lernen: UI-Pseudo-Klassen
Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für das Styling von Formularen in verschiedenen Zuständen verfügbar sind.
- Auswahl und Traversierung im DOM-Baum
Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.
Verwandte Konzepte
state()Pseudo-KlasseCSS-Verschachtelung Modul
CSS-Scope Modul
:hostPseudo-Klasse:host()Pseudo-Klasse:host-context()Pseudo-Klasse:has-slottedPseudo-Klasse::slottedPseudo-Element
CSS-Überlauf Modul
CSS-Mehrspalten-Layout Modul
CSS-Medien für Seiten Modul
CSS-Pseudo-Element-Modul (repräsentiert Entitäten, die nicht in HTML enthalten sind)
::partPseudo-Element
AnderePseudo-Elemente
@namespaceAt-Regel!importantDocument.querySelectorMethodeDocument.querySelectorAllMethodeNodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |