Elementkiezers die worden gebruikt in de composer voor visuele ervaring

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

Onderwerpen:

Een elementkiezer is een CSS-expressie waarmee een of meer elementen kunnen worden geïdentificeerd.

U kunt basisinformatie over CSS selecteurs in het document van de Kiezersop Mozilla Developer Network (MDN) vinden.

U kunt instellen of u in uw accountvoorkeuren een elementklasse- of element-id wilt gebruiken. Klik op Administration > Visual Experience Composer en kies de gewenste CSS-kiezers.

element IDs van het Gebruik: maak onbruikbaar als zelfde identiteitskaart voor veelvoudige elementen wordt gebruikt of element IDs op paginading zou kunnen veranderen.
de elementenklassen van het Gebruik: maak onbruikbaar als de elementenklassen op een pagina zouden kunnen veranderen.
Gebruik aangewezen selecteurs: laat toe als u unieke selecteurs in VEC wilt gebruiken om zeer belangrijke gebieden van uw website te identificeren.

NOTE

Elementklassen zijn beschikbaar als kiezers in A/B Test -, Automated Personalization - en Multivariate Test -activiteiten.

Voor informatie over wanneer om CSS selecteurs te gebruiken en wanneer om unieke IDs te gebruiken, zie {de Beste Praktijken en Beperkingen van Composer van 0} Visuele Ervaring Composer .

Hoe Target een kiezer voor een element genereert section_D89D954BCBFB486CA081BE183776A475

Target gebruikt een eenvoudig algoritme om een kiezer te maken. Hier volgt een korte uitleg van de generatielogica:

Als een element een id heeft, bijvoorbeeld id="container" , is de kiezer voor het element #container .

Bijvoorbeeld:

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>

Als een element een klassenkenmerk bevat, probeert Target de eerste klasse van alle klassen die zich op het element bevinden, te benutten.

Target probeert het bovenliggende element te parseren totdat het het <HTML> -element of een element met een id vindt. Wanneer een element een id bevat en de kiezer op het onderliggende element wordt berekend, levert de id van dit element een bijdrage aan de kiezer.

Bijvoorbeeld:

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 dit voorbeeld:

Selector: #container > ul.navigation:eq(0) > li.item:eq(0) (" > " geeft het directe onderliggende item aan.)

eq vertelt de index dat er een element is met "tagName=UL" en de eerste klasse is navigation . Daarom is index 0. Zie het artikel van Kiezersin MDN voor meer informatie.

Als een element geen klasse bevat, gebruikt Target tagName voor het element en doorloopt het bovenliggende element totdat het element <HTML> of een element met een id is gevonden.

Bijvoorbeeld:

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>

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

In het bovenstaande proces:

U kunt elke CSS-kiezer gebruiken zolang deze een element in het DOM op unieke wijze identificeert.
De bovenstaande aanpak wordt gebruikt door Target . Target geeft u geen opdracht om deze aanpak te gebruiken. U kunt elke kiezer toevoegen zolang punt #1 waar is.
U kunt elk willekeurig kenmerk in de kiezer gebruiken. Dit document gebruikt alleen een klassenaam als voorbeeld.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654