CSS-Selektor

Auf dieser Seite:

• Erste Schritte und Tastaturkürzel
• Entwicklertools öffnen
• Einen Selektor von einer Seite kopieren
• Was sind Selektoren?

Es gibt mehrere Bereiche der Anwendung „axe Auditor“, die ein Selektor -Feld bereitstellen. Befolgen Sie diesen Prozess, wenn Sie einen bestimmten CSS-Selektor angeben möchten, der im Rahmen des Folgenden getestet werden soll:

• Gemeinsame Komponente (Neuer Testfall > Komponente hinzufügen): Beim Definieren einer gemeinsamen Komponente im Bereich „Gemeinsame Komponenten“ beim Erstellen eines neuen Testfalls.
• Seitenbereichskomponente (Neuer Testfall > Seite hinzufügen > Seitenbereichsgeltungsbereich): Beim Definieren eines Seitenbereichs im Bereich „Seiten hinzufügen“ beim Erstellen eines neuen Testfalls.
• Seitenbereichskomponente (Seite vorbereiten für automatisierte und manuelle Testen > Seitenbereichsgeltungsbereich): Beim Definieren eines Seitenbereichs des "Seite im Test" auf der Seite "Vorbereiten" für automatisierte und manuelle Testbildschirm, der über die Testlaufübersicht aufgerufen wird.

Erste Schritte

Zum Suchen und Kopieren eines Selektors benötigen Sie normalerweise die "Developer Tools", die mit Ihrem Webbrowser geliefert werden. Diese haben je nach Browsertyp unterschiedliche Namen und bieten jeweils Tastaturkürzel für den Zugriff auf die Tools und die Navigation darin.

Referenz der Tastaturkürzel nach Browsertyp

• Google Chrome – DevTools: Tastaturkürzel – Google Chrome
• Apple Safari – Web Inspector: Tastaturkürzel
• Microsoft Edge – Entwicklertools: Tastenkombinationen für Entwicklertools
• Microsoft Internet Explorer – F12-Entwicklertools: Developer Tools Keyboard Shortcuts Reference

Auf einem Mac: Im Allgemeinen kann die Taste Cmd (⌘) durch [Strg] auf einem OSX- oder iOS-Gerät ersetzt werden.

Öffnen der Entwicklertools (Firefox-Beispiel)

Das folgende Beispiel zeigt die Verwendung der Mozilla Firefox Developer Tools. Weitere Informationen zur Verwendung von Tastaturkürzeln mit Firefox Developer Tools finden Sie unter Mozilla Entwickler Tastaturkürzel .

Sie können den Inspector (eines der Entwicklertools, mit dem alle gestartet werden) auf eine der folgenden Arten öffnen:

• Ohne ausgewähltes Element: Wählen Sie die Option Inspektor aus dem Menü Entwickler (Strg+Umschalt+I) oder wählen Sie in der Firefox-Menüleiste Tools > Webentwickler > Inspektor (Strg+Umschalt+C).

– Bei ausgewähltem Element: Klicken Sie mit der rechten Maustaste auf ein Element auf einer Webseite und wählen Sie Element untersuchen [(Q)]{.kbd}.

Einen Selektor von einer Seite kopieren

1. Klicken Sie mit der rechten Maustaste auf den gewünschten Bereich der Testseite und wählen Sie dann

Klicken Sie im Menü auf „Element untersuchen“ , um den Inspektor zu starten, damit Sie dann ein Element auf der Seite auswählen können (oder verwenden Sie die Tastenkombination Strg+Umschalt+I).

![Klicken Sie mit der rechten Maustaste auf die zu testende Seite und wählen Sie dann im Menü „Element untersuchen“ aus.](../../../images/right-click-inspect-element.png)

2. Kopieren Sie den CSS-Selektor, auf den Sie abzielen möchten. Wenn Sie beispielsweise die Firefox Developer Tools verwenden, können Sie im Inspector-Tool Rechtsklick > Eindeutigen Selektor kopieren für das aktuell ausgewählte Element. Achten Sie darauf, die vollständige Elementreferenz ordnungsgemäß formatiert einzufügen (um beispielsweise das id Attribut des Elements auf den Wert "main" #main zu testen, geben Sie als Selektor an).

   

Informationen – Referenz zur Selektorformatierung mit Beispiel: Ausführliche Informationen zu richtig formatierten CSS-Selektoren und eine vollständige Elementreferenz finden Sie in der Dokumentation zum Mozilla Developer Web CSS Selector{.external} oder in der W3C-Empfehlung für Selektoren Level 3{.external}.

• Selektor: #id - Der #id-Selektor formatiert das Element mit der angegebenen ID.

• Beispiel: #main - Die angegebene ID ist [missing object]. main

• Beispielreferenz: Wählt das Element mit [missing object] aus. id="main"

  

3. Fügen Sie den Selektor, den Sie aus der virtuellen Zwischenablage kopiert haben, in das Feld Selektor ein.

   Wenn Sie auf die resultierenden Probleme für die Komponente oder den Seitenbereich zugreifen, sehen Sie die Probleme, die mit dem von Ihnen eingegebenen CSS-Selektor in Zusammenhang stehen.

4. Bekannter Fehler: Bei Verwendung des CSS-Selektors im Chrome-Browser. Rechtsklick Inspect, Dev Tools öffnen, auf dem Elemente-Tab den CSS-Selektor zum Zielen und Klicken finden, Element>Kopieren>XPath oder Element>Kopieren>Vollständiger XPath gibt immer diesen Fehler zurück.' Ein unbekannter Fehler ist aufgetreten. Wenn dieser Testfall Komponenten oder Seitenbereiche enthält, stellen Sie bitte sicher, dass alle Selektoren gültig sind.'\ Problemumgehung: Finden Sie die ID für den CSS-Selektor und Kopieren>Selektor kopieren

Was sind Selektoren?

Kurze Antwort: Es handelt sich um Textzeichenfolgen, die zur Identifizierung eines Elements oder einer Gruppe von Elementen auf einer Webseite verwendet werden können.

Etwas längere, technischere Antwort: Selektoren sind Muster, die mit Elementen in einer Baumstruktur übereinstimmen und zum Testen bestimmter Fragmente oder zum Auswählen von Knoten in HTML- oder XML-Dokumenten verwendet werden können. Die Cascading Style Sheet (CSS3)-Sprache beschreibt die Darstellung von HTML-Dokumenten auf dem Bildschirm oder in gesprochener Form und verwendet Selektoren zur Bindung von Stilen Bindet Eigenschaften an Elemente in HTML-Dokumenten.

Verwendung: Durch die Auswertung des Ausdrucks über alle Elemente in einem Teilbaum hinweg können Selektoren für Folgendes verwendet werden:

• Eine Reihe von Elementen auswählen
• Wählen Sie ein einzelnes Element aus einer Reihe von Elementen aus

Struktur: Ein Selektor stellt eine Struktur dar, die als Bedingung (wie in einer CSS-Regel) verwendet werden kann, die bestimmt, mit welchen Elementen ein Selektor in einem Dokumentbaum übereinstimmt, oder als einfache Beschreibung des HTML- oder XML-Fragments, das dieser Struktur entspricht.

Typen: Zu den Selektortypen gehören:

• Universal: Der qualifizierte Name eines beliebigen Elementtyps (*) Um beispielsweise den qualifizierten Namen eines beliebigen englischsprachigen Elements im Dokumentbaum für einen beliebigen Namespace anzugeben, geben Sie Folgendes ein:

  *[hreflang|=en]

• Type: Ein optionales Namespace-Komponentenpräfix, das einem Elementnamen vorangestellt wird (|) Um beispielsweise ein Überschrift-2-Element im Dokumentbaum darzustellen, geben Sie einfach Folgendes ein:

  h2

• Attribut: Stellt ein Attribut eines Elements dar ([]) Um beispielsweise ein h3-Element darzustellen, das das Titelattribut enthält, unabhängig von seinem Wert, geben Sie Folgendes ein:

  h3[title]

• Klasse: Punkt-Notation zur Darstellung des Klassenattributs für den jeweiligen Namespace (.) Um beispielsweise allen Elementen mit class="example" die Farbstilinformationen Grün zuzuweisen, geben Sie Folgendes ein:

  .example { color: green } / all elements with class=example */

• ID: Attribute vom Typ ID identifizieren ein Element eindeutig mit einem Nummernzeichen (#) Um beispielsweise einen ID-Selektor darzustellen, bei dem jedes Element, dessen ID-typisierter Attributwert „12345“ ist, geben Sie Folgendes ein:

  #12345

• Pseudoklassen: Auswahl von Informationen außerhalb des Dokumentbaums, die nicht mit einfachen Selektoren ausgedrückt werden können (:) Um beispielsweise einen Selektor anzugeben, der Links mit der Klasse „extern“ und „bereits besucht“ darstellt, geben Sie Folgendes ein:

  a.external:visited

• Pseudoelemente: Zwei Doppelpunkte, gefolgt vom Namen eines Pseudoelements, ermöglichen den Zugriff auf Inhalte außerhalb des aktuellen Dokumentbaums, und es ist nur eines pro Selektor zulässig (::)

  Um beispielsweise die Buchstaben der ersten Zeile jedes p-Elements in Großbuchstaben zu ändern, geben Sie Folgendes ein:

  p::first-line { text-transform: uppercase }

• Kombinatoren: Erlauben die Angabe eines hierarchischen Pfads, um die Abstammung anzuzeigen, z. B. untergeordnete oder geschwisterliche Elemente ( ) oder (+)

  Um beispielsweise em-Elemente anzusprechen, die Nachkommen von h1-Elementen sind, geben Sie Folgendes ein:

  h1 em.

  Es handelt sich um eine korrekte und gültige, jedoch unvollständige Beschreibung des folgenden Fragments:

  <h1>This <span class="myclass"> headline is <em>very>/em> important</span></h1>

Syntax: Die grundlegende "Grammatik" von Selektoren umfasst Folgendes:

• *: 0 oder mehr (Hinweis: Da dieses weggelassen werden kann, wenn es impliziert ist, Wird nicht oft verwendet.)
• +: 1 oder mehr
• ?: 0 oder 1
• |: trennt Alternativen
• [ ]: Gruppierung

Umfassende Referenz: Weitere Informationen finden Sie unter World Wide Web Consortium (W3C) – Selectors Level 3: https://drafts.csswg.org/selectors-3/

Verwandte Themen:

• Hinzufügen allgemeiner Komponenten
• Eine Seite zu einem Testfall hinzufügen