DokumentationTargetAnvändarhandbok om Target

Elementväljare som används i Visual Experience Composer

Last update: Wed Aug 27 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

En elementväljare är ett CSS-uttryck som kan identifiera ett eller flera element.

Grundläggande information om CSS-väljare finns i dokumentet Selectors på Mozilla Developer Network (MDN).

Du kan ange om element-ID:n som klassas eller element-ID:n ska användas i dina kontoinställningar. Klicka på Administration > Visual Experience Composer och välj sedan dina önskade CSS-väljare.

  • Använd element-ID: Inaktivera om samma ID används för flera element eller element-ID:n kan ändras vid sidinläsning.
  • Använd elementklasser: Inaktivera om elementklasserna på en sida kan ändras.
  • Använd önskade väljare: Aktivera om du vill använda unika väljare i VEC för att identifiera nyckelområden på webbplatsen.
NOTE
Elementklasser är tillgängliga som väljare i A/B Test-, Automated Personalization- och ​ Multivariate Test-aktiviteter.

Mer information om när CSS-väljare ska användas och när unika ID:n ska användas finns i Bästa metoder och begränsningar i Visual Experience Composer.

Så här genererar Target en väljare för ett element section_D89D954BCBFB486CA081BE183776A475

Target använder en enkel algoritm för att skapa en väljare. Här följer en kort beskrivning av genereringslogiken:

  1. Om ett element har ett ID, till exempel id="container", är väljaren för elementet #container.

    Exempel:

    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>

  2. Om ett element innehåller ett klassattribut försöker Target utnyttja den första klassen i några klasser som finns i elementet.

    Target försöker tolka det överordnade elementet tills det hittar elementet <HTML> eller ett element med ett ID. När ett element innehåller ett ID och väljaren beräknas på det underordnade elementet, bidrar elementets ID till väljaren.

    Exempel:

    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>

    I detta exempel:

    Väljare: #container > ul.navigation:eq(0) > li.item:eq(0) (" > " anger det omedelbara underordnade objektet.)

    eq anger för indexet att det finns ett element som har "tagName=UL" och den första klassen är navigation. Därför är index 0. Mer information finns i artikeln Väljare i MDN.

  3. Om ett element inte innehåller någon klass använder Target tagName för elementet och går uppåt i det överordnade elementet tills antingen elementet <HTML> eller ett element med ett ID hittas.

    Exempel:

    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>

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

I ovanstående process:

  • Du kan använda valfri CSS-väljare så länge den unikt identifierar ett element i DOM.
  • Metoden ovan används av Target. Target tillåter inte att du använder den här metoden. Du kan lägga till valfri väljare förutsatt att punkt 1 är sann.
  • Du kan använda valfritt attribut i väljaren. I det här dokumentet används endast ett klassnamn som exempel.
recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654