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

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

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

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

注意

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

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

AdobeTarget如何為元素生成選擇器

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

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

    例如:

    <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 會貢獻給選取器。

    例如:

    <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 的元素為止。

    例如:

    <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 不強迫您使用此方法。只要符合第一項重點,您可以新增任何選取器。
  • 您可以在選取器中使用任何屬性。本文只使用類別名稱當作範例。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now