CSS-Selektoren
Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die dann eine Reihe von CSS-Regeln zusammen mit ihrer Spezifität angewendet wird. Das CSS-Selektoren-Modul stellt uns mehr als 60 Selektoren und fünf Kombinatoren zur Verfügung. 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 durch CSS-Spezifikationen definierten Selektoren zu finden, sehen Sie sich die Selektoren-Referenzseite an.
In CSS sind Selektoren Muster, die verwendet werden, um die Elemente abzugleichen oder auszuwählen, die Sie stylen möchten. Selektoren werden auch in JavaScript verwendet, um das Auswählen von DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden.
Selektoren, sei es in CSS oder JavaScript, ermöglichen das gezielte Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, ihren aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren erlauben es, präziser zu sein, indem sie das Auswählen von Elementen basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.
Referenz
Kombinatoren und Trennzeichen
+(Nachfolgender Geschwister-Kombinator)>(Kind-Kombinator)~(Subsequent Geschwister-Kombinator)- " " (Nachkomme-Kombinator)
|(Namensraum-Trennzeichen),(Selektorliste)
Das CSS-Selektoren-Modul führt auch den Spalten-Kombinator (||) ein. Zurzeit unterstützt kein Browser dieses Feature.
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()(veralteter Legacy-Selektor 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
- Typselektoren
- Universalselektoren
Das CSS-Selektoren-Modul führt auch die :blank, :current, und :local-link Pseudo-Klassen ein. Zurzeit unterstützen keine Browser diese Features.
Begriffe
Leitfaden
- CSS Selektoren und Kombinatoren
-
Übersicht über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die im CSS Selektoren und den CSS Pseudo-Modulen definiert sind.
- CSS Selektorstruktur
-
Erklärung der Struktur der CSS-Selektoren und der Terminologien, die im CSS-Selektoren-Modul eingeführt werden, die von "einfachem Selektor" bis "verzeihendem relativem Selektorenliste" reichen.
- Pseudo-Klassen
-
Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind und in den verschiedenen CSS-Modulen und HTML definiert sind.
- Verwendung der
:targetPseudo-Klasse in Selektoren -
Lernen Sie, wie Sie die
:targetPseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragmentidentifikators zu stylen. - Datenschutz und der
:visitedSelektor -
Untersucht die Stilbeschränkungen, die zum Schutz der Privatsphäre des Benutzers auf die
:visitedKlasse angewendet werden. - CSS-Grundbausteine: CSS-Selektoren
-
Einführung in grundlegende CSS-Selektoren, einschließlich Tutorials über Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente und Kombinatoren.
- Lernen: UI Pseudo-Klassen
-
Lernen Sie die verschiedenen UI Pseudo-Klassen kennen, die zum Styling von Formularen in unterschiedlichen Zuständen zur Verfügung stehen.
- 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-Klasse -
CSS-Nesting Modul
-
CSS-Scoping Modul
:hostPseudo-Klasse:host()Pseudo-Klasse:host-context()Pseudo-Klasse:has-slottedPseudo-Klasse::slottedPseudo-Element
-
CSS-Überlauf Modul
-
CSS-Mehrspaltenlayout Modul
-
CSS-gedruckte Medien Modul
-
CSS-Pseudo-Element-Modul (repräsentiert Entitäten, die nicht in HTML enthalten sind)
-
::partPseudo-Element
-
Andere Pseudo-Elemente
-
@namespaceAt-Regel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |