Element-Selektoren, die im Visual Experience Composer verwendet werden

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Ein Element-Selektor ist ein CSS-Ausdruck, der eines oder mehrere Elemente kennzeichnen kann.

Grundlegende Informationen zu CSS-Selektoren finden Sie im Dokument Selektoren im Mozilla Developer Network (MDN).

Sie können festlegen, ob Sie Elementklassen oder Element-IDs in Ihren Kontovoreinstellungen verwenden möchten. Klicken Sie auf Administration > Visual Experience Composer und wählen Sie dann Ihre bevorzugten CSS-Selektoren aus.

css_selectors image

NOTE

Elementklassen sind als Selektoren in Aktivitäten mit A/B-Tests, automatisierter Personalisierung und Multivarianz-Tests verfügbar.

Informationen dazu, wann CSS-Selektoren und wann eindeutige IDs verwendet werden sollen, finden Sie unter Best Practices und Einschränkungen von Visual Experience Composer.

Wie Adobe Target einen Selektor für ein Element generiert section_D89D954BCBFB486CA081BE183776A475

Target verwendet zur Erstellung eines Selektors einen einfachen Algorithmus. Hier sehen Sie eine sehr kurze Erklärung der Erstellungslogik:

Wenn ein Element eine ID enthält, zum Beispiel id="container", dann lautet der Name des Selektors für das Element #container.

Beispiel:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- Selector is computed for this element --> <ul class="navigation"> <li class="item active"> Home </li> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- Selector is computed for this element -->
    <ul class="navigation">
      <li class="item active"> Home </li>
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

Wenn ein Element ein Klassenattribut enthält, versucht Target, die erste Klasse der im Element vorhandenen Klassen zu nutzen.

Target versucht, das übergeordnete Element zu analysieren, bis es das <HTML>-Element oder ein Element mit einer ID findet. Wenn ein Element eine ID enthält und der Selektor auf Basis dessen untergeordneten Elements berechnet wird, trägt die ID dieses untergeordneten Elements zum Selektor bei.

Beispiel:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li class="item active"> Home </li> <!-- Selector is computed for this element --> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li class="item active"> Home </li> <!-- Selector is computed for this element -->
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

In diesem Beispiel:

Selektor: #container > ul.navigation:eq(0) > li.item:eq(0) („>“ gibt das unmittelbar untergeordnete Element an.)

eq gibt für den Index an, dass es ein Element mit „tagName=UL“ gibt und die erste Klasse navigation lautet. Deshalb ist index = 0. Weitere Informationen finden Sie im Artikel Selektoren im MDN.

Wenn ein Element keine Klasse enthält, verwendet Target den tagName für das Element und sucht aufwärts im übergeordneten Element, bis es ein <HTML>-Element oder ein Element mit einer ID findet.

Beispiel:

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li> Home </li> <li> Men </li> <li class="active"> Women </li> <li> Kids </li><!-- Selector is computed for this element --> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li> Home </li>
      <li> Men </li>
      <li class="active"> Women </li>
      <li> Kids </li><!-- Selector is computed for this element -->
    </ul>
  </div>
</div>

Selektor: #container > ul.navigation(0) > li:nth-of-type(4)

Weitere Informationen zu nth-of-type finden Sie auf der Webseite „CSS-Tricks“.

Im oben dargestellten Prozess

können Sie jeden beliebigen CSS-Selektor verwenden, solange er ein Element eindeutig im DOM identifiziert.
Die oben genannte Vorgehensweise ist die von Target. Target schreibt diese Vorgehensweise jedoch nicht vor. Sie können jeden beliebigen Selektor hinzufügen, vorausgesetzt Punkt 1 ist zutreffend.
Sie können jedes beliebige Attribut im Selektor verwenden. Dieses Dokument verwendet den Klassennamen nur als Beispiel.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654