可視化體驗撰寫器中使用的元素選取器

元素選取器是一種可以識別一或多個元素的 CSS 運算式。

您可以在 Mozilla 開發人員網路 (MDN) 上的選取器文件中,找到關於 CSS 選取器的基本資訊。

您可以在帳戶偏好設定中設定使用元素類別還是元素 ID。按一下​ Administration > Visual Experience Composer,然後選擇您偏好的CSS選取器。

css_selectors影像

NOTE
在 A/B 測試、自動個人化和多變數測試活動中,「元素類別」是可用的選取器。

如需 CSS 選取器及不重複 ID 之使用時機的相關資訊,請參閱可視化體驗撰寫器最佳作法與限制

AdobeTarget如何產生專案的選取器 section_D89D954BCBFB486CA081BE183776A475

Target 會使用簡單演算法來建立選取器。以下是關於產生邏輯的極短說明:

  1. 如果元素有 ID (例如 id="container"),則元素的選取器是 #container

    例如:

    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>
    
  2. 如果元素包含類別屬性,Target 會嘗試使用元素上所出現任何類別中的第一個類別。

    Target 會嘗試剖析父元素,直到找到 <HTML> 元素或具有 ID 的元素為止。每當元素包含 ID,且選取器在其子項上計算時,此元素的 ID 會貢獻給選取器。

    例如:

    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>
    

    在此範例中,

    選取器: #container > ul.navigation:eq(0) > li.item:eq(0) (「>」表示直屬子項。)

    eq 會向索引表示一個元素有 "tagName=UL",第一個類別是 navigation。因此,index 為 0。如需詳細資訊,請參閱 MDN 中的選取器文章。

  3. 如果元素不含類別,Target 會對元素使用 tagName,並往父元素周遊,直到遇到 <HTML> 元素或具有 ID 的元素為止。

    例如:

    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>
    

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

    您可以在 CSS Tricks 網頁上進一步瞭解 nth-of-type

在上述程序中:

  • 只要能夠在 DOM 中唯一地識別元素,您可以使用任何 CSS 選取器。
  • Target 就是採用上述方法。Target 不強迫您使用此方法。只要符合第一項重點,您可以新增任何選取器。
  • 您可以在選取器中使用任何屬性。本文只使用類別名稱當作範例。
recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654