- 09 Aug 2024
- 2 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
CSS-Selektor eines Elements identifizieren
- Aktualisiert am 09 Aug 2024
- 2 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
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:
- Flow läuft nicht korrekt
- Flow-Tooltip flackert oder erscheint an unterschiedlicher Position
- Flow konnte das Element für den nächsten Schritt nicht erkennen
- Smart Tips erscheinen zufällig
- Smart Tip wird an einer falschen Position angezeigt
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:
-
Öffnen Sie die Entwickler-Tools
-
Gehen Sie in den Inspectormodus.
-
Wählen Sie das Element aus, dessen Selektoren Sie finden möchten.
-
Identifizieren Sie die Selektoren des markierten Tags im Elemente Abschnitt des Fensters "Entwicklertools".
-
Verwenden Sie einen geeigneten Selektor im Sichtbarkeit und Anzeigeregeln Bedingungen Ihres Inhalts.
your title goes hereSie 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.
-
Wenn Ihr Element mehrere Klassen hat, verwenden Sie eine Kombination von ihnen in Ihren Anzeigeregeln.
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.