Selettori di elementi utilizzati nel Compositore esperienza visivo

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

Argomenti:

Un selettore di elementi è un’espressione CSS che può identificare uno o più elementi.

Puoi trovare informazioni di base sui selettori CSS nel documento Selettori in Mozilla Developer Network (MDN).

Puoi specificare se utilizzare l’ID o la classe degli elementi nelle preferenze dell’account. Fai clic su Administration > Visual Experience Composer, quindi scegli i selettori CSS preferiti.

Usa ID elemento: disabilita se lo stesso ID viene utilizzato per più elementi, altrimenti gli ID elemento potrebbero cambiare al caricamento della pagina.
Usa classi elemento: disabilita se le classi elemento in una pagina potrebbero cambiare.
Usa selettori preferiti: abilita se desideri utilizzare selettori univoci nel Compositore esperienza visivo per identificare aree chiave del sito Web.

NOTE

Le classi di elementi sono disponibili come selettori nelle attività A/B Test, Automated Personalization e Multivariate Test.

Per informazioni su quando utilizzare selettori CSS e quando utilizzare ID univoci, consulta Best practice e limitazioni del Compositore esperienza visivo.

Come Target genera un selettore per un elemento section_D89D954BCBFB486CA081BE183776A475

Target utilizza un algoritmo semplice per creare un selettore. Ecco una breve spiegazione della logica di generazione:

Se un elemento ha un ID, ad esempio id="container", il selettore per l'elemento è #container.

Ad esempio:

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>

Se un elemento contiene un attributo di classe, Target tenta di sfruttare la prima classe di qualsiasi classe presente nell'elemento.

Target tenta di analizzare l'elemento padre finché non trova l'elemento <HTML> o un elemento con un ID. Ogni volta che un elemento contiene un ID e il selettore viene calcolato sul relativo figlio discendente, l’ID di questo elemento contribuisce al selettore.

Ad esempio:

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 questo esempio:

Selettore: #container > ul.navigation:eq(0) > li.item:eq(0) (“ > ” indica l’elemento secondario diretto).

eq comunica all’indice che c’è un elemento con "tagName=UL" e che la prima classe è navigation. Pertanto, l’index è 0. Per ulteriori informazioni, leggi l’articolo sui selettori in MDN.

Se un elemento non contiene una classe, Target utilizza tagName per l'elemento ed analizza l'elemento padre finché non viene trovato l'elemento <HTML> o un elemento con un ID.

Ad esempio:

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>

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

Nel processo sopra indicato:

È possibile utilizzare qualsiasi selettore CSS purché identifichi in modo univoco un elemento nel DOM.
L'approccio sopra riportato è quello utilizzato da Target. Target non richiede l'utilizzo di questo approccio. È possibile aggiungere qualsiasi selettore purché il punto #1 sia rispettato.
È possibile utilizzare qualsiasi attributo nel selettore. Questo documento utilizza solo un nome di classe come esempio.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654