Selettori di elementi utilizzati nel Compositore esperienza visivo

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 Amministrazione > Compositore esperienza visivo, quindi scegli i selettori CSS preferiti.

NOTA

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.

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:

  1. 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>
    
  2. 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"> <!-- 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 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.

  3. 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)

    Puoi scoprire di più su nth-of-type nella pagina web dei trucchi per CSS.

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.

In questa pagina