Selettori di elementi utilizzati nel Compositore esperienza visivo

Last update: Tue Feb 18 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 sui 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.

immagine css_selectors

NOTE

Le classi di elementi sono disponibili come selettori nelle attività per test A/B, Personalizzazione automatizzata e test multivariati.

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

Come Adobe Target genera un selettore per un elemento

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

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

Ad esempio:

<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 fino a quando 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 suo discendente, l’ID di questo elemento contribuisce al selettore.

Ad esempio:
<div class="wrapper"> <div id="container">  <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>
In questo esempio:

Selettore: #container > ul.navigation:eq(0) > li.item:eq(0) (“ > ” indica l’elemento figlio 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 fino a quando non viene trovato l’elemento <HTML> o un elemento con un ID.

Ad esempio:

<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 indicato è quello utilizzato da Target. Target non impone di utilizzare questo approccio. È possibile aggiungere qualsiasi selettore purché il punto #1 sia rispettato.
È possibile utilizzare qualsiasi attributo nel selettore. Questo documento utilizza solo il nome della classe come esempio.

recommendation-more-help