So finden Sie CSS-Selektoren

Erfahren Sie, wie Sie CSS-Selektoren für Textbereiche, Formulare und Eingabefelder identifizieren, um AI Anywhere-Helfer in Ihre Website zu integrieren.

15 Min. Lesezeit

Sehen Sie sich dieses Anleitungsvideo an, um zu lernen, wie Sie CSS-Selektoren mit den Entwicklerwerkzeugen des Browsers finden.

CSS-Selektoren sind Muster, die verwendet werden, um HTML-Elemente auf Ihrer Webseite auszuwählen. Wenn Sie einen AI Anywhere-Helfer erstellen, müssen Sie angeben, welches Textfeld oder Formularfeld der Helfer mit einem CSS-Selektor anvisieren soll.

Methode 1: Rechtsklick Element untersuchen (Empfohlen)

Die schnellste und einfachste Methode, um Selektoren zu finden, ohne die vollständigen Entwickler-Tools zu öffnen.

Rechtsklicken Sie auf das Ziel-Element (Textfeld, Eingabefeld, etc.)
Wählen Sie "Element untersuchen" aus dem Kontextmenü
Im Elemente-Panel:
- Rechtsklicken Sie auf das hervorgehobene Element
- Wählen Kopieren → Selektor kopieren

Methode 2: Verwendung der Browser-Entwickler-Tools

Dies ist die zuverlässigste Methode, um Selektoren auf jeder Website zu finden.

Entwicklerwerkzeuge öffnen:
- Chrome/Edge: Drücken Sie F12 oder Ctrl+Shift+I
- Firefox: Drücken Sie F12 oder Ctrl+Shift+I
- Safari: Drücken Sie Cmd+Option+I
Element auswählen:
- Klicken Sie auf das Elemente Tab in den Entwicklerwerkzeugen
- Klicken Sie auf das Element auswählen Werkzeug (Cursor-Symbol) oben links
- Klicken Sie auf das Textfeld oder Formularfeld, das Sie anvisieren möchten
Selektor kopieren:
- Rechtsklicken Sie auf das hervorgehobene Element im Elemente-Panel
- Wählen Sie Kopieren → Selektor kopieren
- Fügen Sie diesen Selektor in Ihre AI Anywhere-Helferkonfiguration ein

Beispiel: If you select a textarea with id="comments", you'll get: #comments

Methode 3: Manuelle Selektorerstellung

Lernen Sie, Selektoren manuell zu erstellen, indem Sie die HTML-Struktur verstehen.

Häufige Selektormuster:

#element-id          /* Element nach ID anvisieren */
.class-name          /* Element nach Klasse anvisieren */
input[type="text"]   /* Bestimmte Eingabetypen anvisieren */
textarea             /* Alle Textbereiche anvisieren */
form .field          /* Elemente innerhalb von Formularen anvisieren */
  

Beispiele:

Nach ID: #message zielt ab <textarea id="message">
Nach Klasse: .comment-box zielt ab <textarea class="comment-box">
Nach Typ: input[type="email"] zielt auf E-Mail-Eingabefelder ab
Nach Attribut: textarea[name="description"] zielt auf Textbereich mit name="description" ab

Häufige Selektorbeispiele

Textbereiche:

#comments           /* Textbereich mit id="comments" */
.message-box        /* Textbereich mit class="message-box" */
textarea[name="bio"] /* Textbereich mit name="bio" */
  

Eingabefelder:

#email              /* Eingabe mit id="email" */
input[type="text"]  /* Alle Texteingaben */
.form-control       /* Bootstrap-Formularsteuerungen */
  

Formularelemente:

#contact-form textarea    /* Textbereich im Kontaktformular */
.comment-section input    /* Eingabe im Kommentarbereich */
.editor textarea          /* Textbereich im Editor */
  

WordPress-spezifische Selektoren

WordPress betreibt über 40% aller Websites, daher sind hier die häufigsten Selektoren, die Sie\ verwenden können

WordPress-Admin-Dashboard-Selektoren:

#content                    /* Hauptinhalt-Editor (Gutenberg/Klassisch) */
.wp-editor-area            /* Klassischer Editor-Textbereich */
.block-editor-default-block-appender__content  /* Gutenberg-Block-Editor */
.editor-post-title__input   /* Beitrags-Titelfeld */
  

WordPress-Kommentarformulare:

#comment                   /* Hauptkommentar-Textbereich */
#respond textarea          /* Kommentar-Textbereich im Kommentarbereich */
.comment-form textarea     /* Kommentarformular-Textbereich */
#commentform textarea      /* Alternativer Kommentarformular-Selektor */
  

WordPress-Kontaktformulare (Contact Form 7, Gravity Forms, etc.):

.wpcf7-textarea            /* Contact Form 7-Textbereich */
.gform_wrapper textarea    /* Gravity Forms-Textbereich */
.wpforms-field-textarea    /* WPForms-Textbereich */
  

WordPress-Seitenersteller:

/* Elementor */
.elementor-widget-text-editor textarea
.elementor-text-editor

/* Beaver Builder */
.fl-builder-content textarea

/* Divi Builder */
.et_pb_text_inner textarea

/* Gutenberg-Blöcke */
.wp-block-paragraph textarea
  

WordPress-Themenspezifische Selektoren:

/* Twenty Twenty-Four Theme */
.wp-site-blocks textarea

/* Astra Theme */
.ast-separate-container textarea

/* GeneratePress Theme */
.inside-article textarea

/* OceanWP Theme */
.content-area textarea
  

WordPress-Tipp: Viele WordPress-Themen verwenden generische Selektoren wie textarea oder input[type="text"]. Testen Sie diese zuerst, bevor Sie spezifischere Selektoren verwenden.

WordPress-Warnung: WordPress-Seiten haben oft mehrere Plugins, die die HTML-Struktur ändern können. Testen Sie Ihre Selektoren immer nach Theme- oder Plugin-Updates.

WordPress-Selektoren Schritt für Schritt finden:

Identifizieren Sie das WordPress-Element:
- Ist es ein Beitrag-Editor, ein Kommentarformular oder ein Kontaktformular?
- Befinden Sie sich im WordPress-Admin-Dashboard oder im Frontend?
- Welches Theme oder welcher Seitenersteller wird verwendet?
Verwenden Sie die Entwicklerwerkzeuge des Browsers:
- Rechtsklicken Sie auf den Textbereich oder das Eingabefeld
- Wählen Sie "Element untersuchen"
- Suchen Sie nach WordPress-spezifischen Klassen oder IDs
Überprüfen Sie auf WordPress-Klassen:
- Suchen Sie nach Klassen, die mit wp-, gutenberg-, oder editor-
- Überprüfen Sie auf themenspezifische Klassen
- Suchen Sie nach pluginspezifischen Klassen (wie wpcf7- für Contact Form 7)

Häufige WordPress-Plugin-Selektoren:

/* WooCommerce */
.woocommerce textarea
#order_comments

/* Yoast SEO */
#yoast_wpseo_metadesc
#yoast_wpseo_focuskw

/* Advanced Custom Fields */
.acf-field textarea

/* Custom Post Type UI */
.cptui textarea

/* WP All Import */
.wpallimport textarea
  

WordPress Multisite Überlegungen:

Multisite Tipp: Bei WordPress Multisite-Installationen können einige Selektoren für Subdomains und Unterverzeichnisse unterschiedlich sein. Testen Sie auf der spezifischen Seite, die Sie\

Testen Ihrer Selektoren

Testen Sie immer Ihre Selektoren, um sicherzustellen, dass sie korrekt funktionieren.

Browser-Konsole öffnen:
- Drücken Sie F12 um Entwicklerwerkzeuge zu öffnen
- Gehen Sie zu Konsole Reiter
Testen Sie den Selektor:
- Geben Sie ein: document.querySelector('your-selector-here')
- Drücken Sie Enter
- Wenn es das Element zurückgibt, funktioniert Ihr Selektor!

// Testbeispiele:
document.querySelector('#comments')        // Sollte das Textbereich-Element zurückgeben
document.querySelector('.message-box')    // Sollte das Element mit dieser Klasse zurückgeben
document.querySelector('textarea[name="bio"]')  // Sollte das Textbereich mit name="bio" zurückgeben
  

Tipps und bewährte Praktiken

Profi-Tipp: Verwenden Sie nach Möglichkeit ID-Selektoren - sie\

Beste Praxis: Vermeiden Sie zu komplexe Selektoren. Einfache Selektoren sind leichter zu pflegen.

Warnung: Wenn Ihre Website dynamische Inhalte oder JavaScript-Frameworks verwendet, können sich Selektoren ändern. Testen Sie gründlich!

Selektor-Priorität (Beste bis Schlechteste):

ID-Selektoren: #element-id (am zuverlässigsten)
Klassen-Selektoren: .class-name
Attribut-Selektoren: input[type="text"]
Tag-Selektoren: textarea (am wenigsten spezifisch)

Fehlerbehebung bei häufigen Problemen

Selektor funktioniert nicht?

Überprüfen Sie auf Tippfehler: Selektoren sind groß- und kleinschreibungssensitiv
Überprüfen Sie, ob das Element existiert: Verwenden Sie die Browser-Konsole zum Testen
Überprüfen Sie auf dynamische Inhalte: Einige Elemente laden nach dem Seitenaufbau
Versuchen Sie einen einfacheren Selektor: Verwenden Sie ID oder Klasse anstelle komplexer Pfade

Mehrere Elemente passen?

Machen Sie den Selektor spezifischer: Fügen Sie ein Elternelement oder ein einzigartiges Attribut hinzu
Verwenden Sie nth-child: textarea:nth-child(2) für das zweite Textfeld
Fügen Sie eine eindeutige Kennung hinzu: Bitten Sie den Entwickler, dem Zielelement eine ID hinzuzufügen

Selektor-Checkliste

Before moving forward, make sure you've completed these steps:

✓ Selektor gefunden

✓ Getestet

✓ Gespeichert

Erklärung:

Selektor gefunden: You've identified a working CSS selector using one of the methods above
Getestet: You've verified the selector works by testing it in your browser console
Gespeichert: You've recorded the selector in your Helper configuration or saved it for later use

Nächste Schritte

Jetzt, da Sie wissen, wie man Selektoren findet, können Sie:

Navigation