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.

immagine css_selectors

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