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 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 die Selektoren 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 als NodeList 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 den Spaltenkombinator (||) 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 zu Typen-, 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 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-Klasse -
CSS-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
-
Andere Pseudo-Elemente
-
@namespaceAt-Regel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |