1. MDN Web Docs
  2. Schreibrichtlinien
  3. Seitenstrukturen
  4. Seitentypen
  5. Vorlage für CSS-Selektor-Seiten

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Vorlage für CSS-Selektor-Seiten

Hinweis:>Entfernen Sie diese gesamte erklärende Anmerkung vor der Veröffentlichung

Seiten-Metadaten:

Die Metadaten am Anfang der Seite definieren "Seiten-Metadaten". Die Werte sollten für den jeweiligen Selektor angemessen aktualisiert werden.

md
---
title: :NameOfTheSelector
slug: Web/CSS/:NameOfTheSelector
page-type: css-selector OR css-pseudo-class OR css-pseudo-element OR css-combinator
status:
  - deprecated
  - experimental
  - non-standard
browser-compat: css.selectors.NameOfTheSelector
sidebar: cssref
---
title

Titelüberschrift, die oben auf der Seite angezeigt wird. Formatieren Sie es als :NameOfTheSelector. Zum Beispiel hat der Selektor :hover den Titel :hover.

slug

Das Ende des URL-Pfads nach https://developer.mozilla.org/de/docs/). Dies wird wie Web/CSS/:NameOfTheSelector formatiert. Zum Beispiel hat der Selektor :hover den Slug Web/CSS/:hover.

page-type

Der Schlüssel page-type für CSS-Eigenschaften ist einer von css-selector, css-pseudo-class oder css-pseudo-element, abhängig davon, ob der Selektor eine Pseudo-Klasse, ein Pseudo-Element, ein Kombinator oder ein einfacher Selektor ist.

status

Kennzeichnungen, die den Status dieser Funktion 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 basierend auf den Browser-Kompatibilitätsdaten für die Funktion gesetzt. Siehe "Wie Leistungsstatus hinzugefügt oder aktualisiert werden".

browser-compat

Ersetzen Sie den Platzhalterwert css.selectors.NameOfTheSelector mit dem Abfrage-String für den Selektor im Browser-Compat-Daten-Repo. Die Werkzeugkette verwendet diesen Schlüssel automatisch, um die Abschnitte Kompatibilität und Spezifikationen auszufüllen (jeweils Ersatz der {{Compat}} und {{Specifications}} Makros in diesen Abschnitten).

Beachten Sie, dass Sie möglicherweise zuerst einen Eintrag für den Selektor und seine Spezifikation in unserem Browser-Compat-Daten-Repo erstellen/aktualisieren müssen. Siehe unseren Leitfaden dazu, wie Sie dies tun.

Dies ist cssref für alle CSS-Leitfaden- und Referenzseiten. Siehe Seitenstrukturen: Seitenleisten für Details.

Makros am Anfang der Seite

Eine Reihe von Makros erscheint oben im Inhaltsbereich unmittelbar nach den Seiten-Metadaten. Diese Makros werden automatisch durch Werkzeuge hinzugefügt, daher vermeiden Sie das Hinzufügen oder Entfernen:

  • {{SeeCompatTable}} — dies erzeugt ein Dies ist eine experimentelle Technologie-Banner, das darauf hinweist, dass die Technologie experimentell ist. Wenn es experimentell ist und die Technologie hinter einem Präferenzschalter in Firefox versteckt ist, sollten Sie auch einen Eintrag dafür auf der Seite Experimentelle Funktionen in Firefox ausfüllen.
  • {{Deprecated_Header}} — dies erzeugt ein Veraltet-Banner, das darauf hinweist, dass die Verwendung der Technologie nicht empfohlen wird.
  • {{Non-standard_Header}} — dies erzeugt ein Nicht-standard-Banner, das darauf hinweist, dass die Funktion nicht Teil einer Spezifikation ist.

Sie sollten die folgenden Makros gemäß den untenstehenden Empfehlungen aktualisieren oder löschen:

Status-Header-Makros nicht manuell bereitstellen. Beziehen Sie sich auf den Abschnitt "Wie Leistungsstatus hinzugefügt oder aktualisiert werden", um diese Status zur Seite hinzuzufügen.

Beispiele der Experimentellen, Veralteten und Nicht-standard-Banner werden direkt nach diesem Anmerkungsblock gezeigt.

Syntax-Abschnitt ({{CSSSyntax}})

Der Inhalt des Syntax-Abschnitts wird mit dem {{CSSSyntax}} Makro generiert. Damit diese sich füllen, müssen Sie sicherstellen, dass ein entsprechender Eintrag für den Selektor in unserer selectors.json Datendatei ausgefüllt ist. Siehe selectors.md für mehr Informationen.

Vergessen Sie nicht, diese gesamte erklärende Anmerkung 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 erläutern, was er macht. Dies sollte idealerweise ein oder zwei kurze Sätze sein.

css
/* 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. Fügen Sie Zugänglichkeitsrichtlinien, Best Practices und potenzielle Bedenken hinzu, denen sich Entwickler beim Verwenden dieser Eigenschaft bewusst sein sollten. Sie können auch Lösungen oder Workarounds hinzufügen, falls zutreffend.

Beispiele

Beachten Sie, dass wir den Plural "Beispiele" verwenden, auch wenn die Seite nur ein Beispiel enthält.

Eine beschreibende Überschrift

Jedes Beispiel muss eine H3-Überschrift (###) haben, die das Beispiel benennt. Die Überschrift sollte beschreiben, was das Beispiel tut. Beispielsweise sagt "Ein einfaches Beispiel" nichts über das Beispiel aus und ist daher keine gute Überschrift. Die Überschrift sollte prägnant sein. Verwenden Sie für eine längere Beschreibung den Absatz nach der Überschrift.

Siehe unseren Leitfaden, wie man Code-Beispiele hinzufügt für mehr Informationen.

Hinweis: Manchmal möchten Sie auf Beispiele auf einer anderen Seite verlinken.

Szenario 1: Wenn Sie einige Beispiele auf dieser Seite und weitere Beispiele auf einer anderen Seite haben:

Fügen Sie für jedes Beispiel auf dieser Seite eine H3-Überschrift (###) hinzu und dann eine letzte H3-Überschrift (###) mit dem Text "Weitere Beispiele", unter der Sie auf die Beispiele auf anderen Seiten verlinken können. Beispielsweise:

md
## 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 und keine auf dieser Seite haben:

Fügen Sie keine H3-Überschriften hinzu; fügen Sie die Links direkt unter der H2-Überschrift "Beispiele" hinzu. Beispielsweise:

md
## 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

Fügen Sie Links zu Referenzseiten und Leitfäden hinzu, die sich auf den aktuellen Selektor beziehen. Für weitere Richtlinien, siehe den Abschnitt Siehe auch im Schreibstil-Leitfaden.

  • link1
  • link2

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden