CSS Selektor-Seitenvorlage
Hinweis: Entfernen Sie diese gesamte erläuternde Notiz vor der Veröffentlichung
Seiten-Metadaten:
Das Frontmatter am Anfang der Seite wird verwendet, um "Seiten-Metadaten" zu definieren. Die Werte sollten entsprechend für den jeweiligen Selektor aktualisiert werden.
---
title: :name-of-the-selector
slug: Web/CSS/Reference/Selectors/:name-of-the-selector
page-type: css-selector OR css-pseudo-class OR css-pseudo-element OR css-combinator
status:
- deprecated
- experimental
- non-standard
browser-compat: css.selectors.name-of-the-selector
sidebar: cssref
---
- title
-
Titelüberschrift, die oben auf der Seite angezeigt wird. Formatieren Sie sie als :NameOfTheSelector. Zum Beispiel hat der
:hoverSelektor einen Titel von :hover. - slug
-
Das Ende des URL-Pfads nach
https://developer.mozilla.org/de/docs/). Dies wird wieWeb/CSS/Reference/Selectors/:name-of-the-selectorformatiert. Zum Beispiel hat der:hoverSelektor den SlugWeb/CSS/Reference/Selectors/:hover. - page-type
-
Der
page-typeSchlüssel für CSS-Eigenschaften ist einer voncss-selector,css-pseudo-class, odercss-pseudo-element, je nachdem, ob der Selektor eine pseudoklasse, ein pseudo-element, ein kombinator, oder ein einfacher Selektor ist. - status
-
Kennzeichnungen, die den Status dieses Features beschreiben. Ein Array, das einen oder mehrere der folgenden Werte enthalten kann:
experimental,deprecated,non-standard. Dieser Schlüssel sollte nicht manuell gesetzt werden: Er wird automatisch anhand von Werten in den Browser-Kompatibilitätsdaten für das Feature festgelegt. Siehe "Wie Feature-Status hinzugefügt oder aktualisiert werden". - browser-compat
-
Ersetzen Sie den Platzhalterwert
css.selectors.NameOfTheSelectormit der Abfragezeichenfolge für den Selektor im Browser compat data repo. Die Toolchain verwendet den Schlüssel automatisch, um die Abschnitte Browser-Kompatibilität und Spezifikationen auszufüllen (indem die{{Compat}}und{{Specifications}}Makros in diesen Abschnitten entsprechend ersetzt werden).Beachten Sie, dass Sie möglicherweise zuerst einen Eintrag für den Selektor und seine Spezifikation in unserem Browser compat data repo erstellen/aktualisieren müssen. Sehen Sie sich unseren Leitfaden an, wie dies zu tun ist.
-
Dies ist
cssreffür alle CSS-Leitfaden- und Referenzseiten. Siehe Seitenstrukturen: Sidebars für Details.
Makros am Seitenanfang
Eine Reihe von Makros erscheint oben im Inhaltsbereich unmittelbar nach dem Seitenmetadaten. Diese Makros werden automatisch durch Tools hinzugefügt, also vermeiden Sie es, sie hinzuzufügen oder zu entfernen:
{{SeeCompatTable}}— dies erzeugt ein Dies ist eine experimentelle Technologie-Banner, das anzeigt, dass die Technologie experimentell ist. Wenn es experimentell ist und die Technologie hinter einem pref in Firefox versteckt ist, sollten Sie auch einen Eintrag dafür auf der Seite Experimentelle Features in Firefox ausfüllen.{{Deprecated_Header}}— dies erzeugt ein Veraltet-Banner, das anzeigt, dass die Verwendung der Technologie unerwünscht ist.{{Non-standard_Header}}— dies erzeugt ein Nicht standardisiert-Banner, das anzeigt, dass das Feature nicht Teil einer Spezifikation ist.
Sie sollten die folgenden Makros gemäß den untenstehenden Ratschlägen aktualisieren oder löschen:
Geben Sie nicht manuell Statusheader-Makros an. Verweisen Sie auf den Abschnitt "Wie Feature-Status hinzugefügt oder aktualisiert werden", um diese Status auf der Seite hinzuzufügen.
Beispiele der Experimentellen, Veralteten und Nicht standardisierten Banner werden direkt nach diesem Notizblock gezeigt.
Syntax Abschnitt ({{CSSSyntax}})
Der Inhalt des Syntaxabschnitts wird mit dem {{CSSSyntax}}-Makro generiert.
Damit diese ausgefüllt werden, müssen Sie sicherstellen, dass ein geeigneter Eintrag für den Selektor in unserer selectors.json Datendatei ausgefüllt wurde.
Weitere Informationen finden Sie in selectors.md.
Denken Sie daran, diese gesamte erläuternde Notiz vor der Veröffentlichung zu entfernen
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Der zusammenfassende Absatz — beginnen Sie damit, den Selektor zu benennen und zu sagen, was er macht. Dies sollte idealerweise ein oder zwei kurze Sätze sein.
/* Insert code block showing common use cases */
Syntax
{{CSSSyntax}}
Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.
Barrierefreiheit
Dies ist ein optionaler Abschnitt. Beinhaltet Richtlinien zur Barrierefreiheit, bewährte Praktiken und potenzielle Bedenken, die Entwickler beachten sollten, wenn sie diese Eigenschaft verwenden. Sie können auch Umgehungen oder Lösungen dort einfügen, wo es zutreffend ist.
Beispiele
Beachten Sie, dass wir den Plural "Beispiele" verwenden, selbst wenn die Seite nur ein Beispiel enthält.
Eine beschreibende Überschrift
Jedes Beispiel muss eine H3-Überschrift (###) mit dem Namen des Beispiels haben. Die Überschrift sollte beschreibend sein, was das Beispiel tut. Zum Beispiel sagt "Ein einfaches Beispiel" nichts über das Beispiel aus und ist daher keine gute Überschrift. Die Überschrift sollte prägnant sein. Für eine längere Beschreibung verwenden Sie den Absatz nach der Überschrift.
Sehen Sie sich unseren Leitfaden an, wie man Code-Beispiele hinzufügt für weitere Informationen.
Hinweis: Manchmal möchten Sie auf Beispiele verlinken, die auf einer anderen Seite angegeben sind.
Szenario 1: Wenn Sie einige Beispiele auf dieser Seite haben und einige weitere Beispiele auf einer anderen Seite:
Fügen Sie eine H3-Überschrift (###) für jedes Beispiel auf dieser Seite hinzu und dann eine abschließende H3-Überschrift (###) mit dem Text "Weitere Beispiele", unter dem Sie auf die Beispiele auf anderen Seiten verlinken können. Zum Beispiel:
## Beispiele
### Verwendung der fetch API
Beispiel von Fetch
### Weitere Beispiele
Links zu weiteren Beispielen auf anderen Seiten
Szenario 2: Wenn Sie nur Beispiele auf einer anderen Seite haben und keine auf dieser Seite:
Fügen Sie keine H3-Überschriften hinzu; fügen Sie einfach die Links direkt unter der H2-Überschrift "Beispiele" hinzu. Zum Beispiel:
## Beispiele
Für Beispiele dieser API siehe [die Seite zu fetch()](https://example.org/).
Spezifikationen
{{Specifications}}
Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.
Browser-Kompatibilität
{{Compat}}
Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.
Siehe auch
Schließen Sie Links zu Referenzseiten und Leitfäden ein, die sich auf den aktuellen Selektor beziehen. Für weitere Richtlinien siehe den Siehe auch Abschnitt im Schreibstil-Leitfaden.
- link1
- link2