Top
CSS-Selektor eines Elements identifizieren
  • 09 Aug 2024
  • 2 Minuten zu lesen
  • Dunkel
    Licht
  • pdf

CSS-Selektor eines Elements identifizieren

  • Dunkel
    Licht
  • pdf

Artikel-Zusammenfassung

CSS-Selektoren werden verwendet, um HTML-Elemente auf einer Webseite auszuwählen. Sie helfen Whatfix dabei, korrekt zu identifizieren, an welchem Element sich Ihr Inhalt festhalten muss. Die folgenden sind Instanzen, in denen Sie CSS-Selektoren in den Anzeigeregeln des Inhalts verwenden möchten:

  • Wann Ihr Whatfix-Inhalt, wie z. B. Flow-Tooltips, Beacons, Smart Tips usw., am falschen Ort angezeigt wird.
  • Wenn Ihr Inhalt nicht angezeigt wird, weil er das richtige Element nicht finden konnte.
  • Wann Sie möchten, dass Ihr Inhalt schneller angezeigt wird.

Die folgenden Szenarien können die Identifizierung eines CSS-Selektors eines Elements beinhalten:


Folgende sind einige gängige CSS-Selektoren:

CSS Selector Beschreibung Beispiel Entsprechendes HTML
.class Wählt die Elemente mit der angegebenen Klasse aus .navbar <div class="navbar">
#id Wählt die Elemente mit der angegebenen id aus #slide <div id="slide">
[attribute="value"] Wählt die Elemente aus, bei denen das angegebene Attribut dem angegebenen Wert entspricht [lang="en"] <div lang="en">

Für eine ausführlichere Referenz zu CSS-Selektoren, sehen Sie CSS Selector Reference.


Verwenden Sie die folgenden Schritte, um die CSS-Selektoren eines Elements in Ihrem Browser herauszufinden:

  1. Öffnen Sie die Entwickler-Tools
    chromedevtools.png

  2. Gehen Sie in den Inspectormodus.
    chromeinspectmode.png

  3. Wählen Sie das Element aus, dessen Selektoren Sie finden möchten.
    chromeselectelementinspect.png

  4. Identifizieren Sie die Selektoren des markierten Tags im Elemente Abschnitt des Fensters "Entwicklertools".
    chromehighlightedtag.png

  5. Verwenden Sie einen geeigneten Selektor im Sichtbarkeit und Anzeigeregeln Bedingungen Ihres Inhalts.

    your title goes here

    Sie können CSS-Selektoren in Anzeigeregeln wie Ausgewähltes Element ist und Anderes Element auf der Seite verwenden.


Wie wählt man einen guten CSS-Selector aus?

Sobald Sie die CSS-Selektoren eines Elements identifizieren, müssen Sie einen Selektor oder eine Kombination von Selektoren auswählen, die Ihr ausgewähltes Element eindeutig beschreibt. Nachfolgend sind einige Tipps, um dies zu tun:

  • Wenn Ihr Element eine ID hat, verwenden Sie es als CSS-Selektor. Die ID eines Elements ist normalerweise eindeutig.
    debugselectid.png

  • Wenn Ihr Element mehrere Klassen hat, verwenden Sie eine Kombination von ihnen in Ihren Anzeigeregeln.
    debugmultipleclasses.png

    Note:

    Sie können mehrere Klassen in einem CSS-Selektor angeben, indem Sie sie miteinander verketten. Das Folgende ist ein Beispiel für die Angabe von 3 Klassen in einem CSS-Selektor:

.klasse1.klasse2.klasse3
:::

  • Wenn Ihr Element keine eindeutigen Attribute hat, überprüfen Sie, ob ein Elternelement Ihr Element eindeutig identifizieren kann. Stellen Sie sicher, dass das übergeordnete Element nur das Element enthält, auf dem Sie Ihren Inhalt anzeigen möchten, andernfalls könnte Ihr Inhalt auf einem der Geschwisterelemente angezeigt werden.
    debugselectparent.png

War dieser Artikel hilfreich?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.