如果你已經使用 GTM 一段時間，可能會經常遇到「CSS 選取器(CSS Selectors)」這個名詞，但不太清楚何時該使用它。實際上，「CSS 選取器」是一個強大的功能，它可以幫助我們解決許多原本需要工程師介入才能完成的追蹤事件，從而減輕工程師的負擔並加快行銷團隊的追蹤效率。
透過「CSS 選取器」，我們能精確選取網頁上的特定元素，並輕鬆獲取其元素名稱、文字和屬性值等信息。這不僅使追蹤的工作更加有效率，也大大擴展了我們在網頁追蹤和數據分析上的可能性。
舉例來說，如果我們希望在使用者滾動網頁至特定位置並看到某張圖片時，自動觸發一項事件，並把該事件及圖片名稱傳送至 GA4，以協助我們分析有多少人瀏覽了該圖片。
這種情況下，我們可以使用「元素可見度」作為觸發條件，結合「CSS 選取器」來精確選取該圖片元素。如果你對設置這類追蹤感興趣，我們之前撰寫過一篇文章，其中詳細介紹了相關步驟，有興趣的朋友可以看這邊。
此外，在設定觸發條件的啟動時機時，你可能會遇到以下這個選項：
或是在設定觸發條件類型「元素可見度」時，也會看到這個選項：
在我們之前介紹「DOM 元素」變數時，也曾經提到「CSS 選取器（CSS Selector）」:
那麼，「CSS 選取器（CSS Selectors）」究竟是什麼呢？在深入探討其使用方法之前，讓我們先瞭解一下「CSS」本身。沒有它，我們所瀏覽的網頁都不會是這麼漂亮或是酷炫的樣子。
本篇重點
什麼是 CSS？
假設今天我們製作了一個網頁，沒有任何的 CSS，只有原始的 HTML 代碼，像是這樣：
<div>
<p>這是一篇介紹 CSS 選取器的文章</p>
</div>而顯示在使用者眼前的網頁會如下圖這樣：
如果我們調整一下 HTML 原始碼，為其加上 CSS，譬如說：把文字顏色變成紅色的，然後在文字下方加個底線。
<div>
<p style="color: red; text-decoration: underline;">這是一篇介紹 CSS 選取器的文章</p>
</div>顯示在使用者眼前的網頁就會變成這樣：
透過簡單的 CSS 應用，我們可以明顯看到文字樣式的轉變：字體獲得了裝飾，同時在文字下方增加了底線。這些只是基礎的 CSS 使用案例。一位優秀的網頁前端設計師能夠利用 CSS 使網頁變得極具吸引力和色彩豐富，從而提升使用者的瀏覽體驗。
CSS 全名是 Cascading Style Sheets，它是一種用於定義標記語言（例如 HTML）所編寫文檔的呈現方式的語言。CSS 讓我們能夠自由調整頁面上的字體、顏色、間距以及圖像，甚至能創建響應式網頁，使網站的版面和外觀根據不同設備（如手機、平板電腦、桌面電腦）自動調整。
簡而言之，CSS 可以讓網頁設計師有效地控制網頁視覺效果和版型，以蓋房子來比喻的話， 如果 HTML 是構成建築的基礎材料，那麼 CSS 就好比是打造美觀外觀的磁磚、油漆或木質裝飾。
重複寫在每個 Tag 裡？
在了解了如何美化網頁文字後，你可能會好奇：如果我有許多段落文字，是否需要在每個 <p></p> 標籤中重複寫入 CSS？
這樣做不僅繁瑣，還會使代碼變得冗長，如下所示：
<div>
<p style="color: red; text-decoration: underline;">這是一篇介紹 CSS 選取器的文章</p>
<p style="color: red; text-decoration: underline;">這是二篇介紹 CSS 選取器的文章</p>
<p style="color: red; text-decoration: underline;">這是三篇介紹 CSS 選取器的文章</p>
</div>
當然，現實操作並非如此麻煩。作為網路技術基石的 CSS，其設計理念就是為了維持 HTML 代碼的簡潔與易於維護。因此，我們可以把負責視覺樣式的 CSS 和負責網頁架構的 HTML 分開成兩個不同的文件，這樣就不需要在每個標籤元素內直接寫入 style 屬性。
這種做法不僅使代碼更加清晰，也便於後續的維護。
在我們上面的案例中，我們有三個段落要透過 CSS 進行美化。
<div>
<p>這是一篇介紹 CSS 選取器的文章</p>
<p>這是二篇介紹 CSS 選取器的文章</p>
<p>這是三篇介紹 CSS 選取器的文章</p>
</div>原本的做法是將 CSS 寫在 <p></p> tag 裡面，現在我們只要在 CSS 文件裡面這樣寫：
p {
color: red;
text-decoration: underline;
}這段代碼的意思是，設定所有 <p></p> 標籤的文字顏色為藍色並加上底線。透過在網頁載入時引入 CSS 文件到 HTML 中，頁面上的所有 <p></p> 標籤便能自動展現出相同的外觀。這樣一來，就無需對每個 <p></p> 標籤重複編寫相同的樣式，大大提高了維護效率和一致性。
CSS 中的 Class 跟 id 又是什麼？
在 CSS 中使用 class 是一種常見的使用方式，這主要是為了提高 CSS 樣式的可重用性和靈活性，使得檔案更加乾淨且容易維護，這對於大型專案來說尤其重要，因為它有助於保持樣式表的清晰性和可管理性。
例如，假設一個網頁的 HTML 結構如下：
<div class="header">這是頭部</div>
<div class="content">這是內容</div>
<div class="footer">這是底部</div>在對應的 CSS 文件中，我們編寫了 .header 的規則。這段 CSS 會與 HTML 文件中的 class=”header” 相對應。因此，屬於該 class 的 <div> 元素背景會變成藍色，而其內的文字則會變為白色：
.header {
background-color: blue;
color: white;
}
.content {
background-color: lightgray;
color: black;
}
.footer {
background-color: green;
color: white;
}通過使用不同的 class（例如 .header, .content, .footer），我們可以為不同元素設定各自的樣式規則。這種方法的優勢在於能夠輕易地在多個標籤元素上重複應用這些 class，無需為每個元素單獨編寫樣式規則。
在未來的網頁設計中，如果其他元素需要應用相同的 CSS 樣式，只需為這些元素添加相應的 Class 名稱即可。這在 CSS 中是一種有效的樣式管理方法，也極大提高了代碼的可維護性。
另一方面，id 也是一種常見的定義方式，但它與 class 有著明顯的區別。在 HTML 文檔中，id 是唯一的，通常用於識別單一獨特的元素。
若使用 id，則網頁 HTML 的結構可能如下所示：
<div id="header">這是頭部</div>
<div id="mainContent">這是主內容</div>
<div id="footer">這是底部</div>在 CSS 文件中的編寫如下所示：其中 #header 會與 HTML 文件中的 id=”header” 相匹配。這樣設定之後，擁有這個 id 的 <div> 元素的背景將變為海軍藍色，而其中的文字則會轉變為白色：
#header {
background-color: navy;
color: white;
}
#mainContent {
background-color: lightblue;
color: black;
}
#footer {
background-color: teal;
color: white;
}除了 id 本身必須是唯一的特性以外，和 class 不同的地方還有他們的前綴符號。
id 是「#」，而 class 是「.」
當你在 CSS 中使用點「.」前綴時，瀏覽器會尋找所有帶有該類名的 HTML 元素並應用相應的樣式。例如，.maldive 在 CSS 中表示所有 class="maldive" 的 HTML 元素。
當您在 CSS 中使用井號「#」前綴時，瀏覽器會尋找帶有該 ID 的唯一 HTML 元素並應用相應的樣式。例如，#theone 在 CSS 中表示 id="theone" 的 HTML 元素。
這兩個符號在語法上定義了選擇器的類型，使得 CSS 語法清晰且易於理解，幫助瀏覽器識別要應用樣式的 HTML 元素，也讓設計師和開發者快速識別出正在應用樣式的是 class 還是 ID，更是我們接下來學習使用「CSS 選取器」重點之一。
所以，「CSS 選取器」是什麼？
在 Google Tag Manager (GTM) 裡，「CSS 選取器」是個超實用的工具，它幫我們準確捕捉網頁上特定元素的行為，來觸發各種事件，例如：
- 當使用者點擊特定位置的
<a></a>tag 時，觸發某事件代碼。 - 或是當網頁上特定位置的 tag 出現在畫面上時，觸發某事件代碼。
- 抓取網頁上特定位置 tag 的屬性值（DOM 元素變數）
「CSS 選取器」讓我們能精確地決定要追蹤網頁上哪些元素的行為，讓數據收集變得更加精準和有效。
如何使用 GTM 中「CSS 選取器」？
接下來，我們來透過一個實務上可能會碰到的例子，來解釋「CSS 選取器」的使用方法。這樣可以幫助我們在特定情況下啟動事件代碼，或是抓取頁面上某個特定位置的數據。
想像一下，有這麼一個網頁場景：
假設我們想要知道有多少人點擊了網頁上的綠色區塊裡的連結。（下圖）
我們的目標是，在使用者點擊這個連結的時候，讓 GA4 觸發一個事件代碼，並向 GA4 傳送一個「點擊」事件。
找出元素所在位置
於畫面中綠色區塊內的連結點右鍵，選擇「檢查」 > 檢查工具中找到 <a></a> 的位置
在瀏覽器的檢查工具裡，我們可以看到網頁的 HTML 代碼，還有它的層層巢狀結構。就像上面的例子，你會發現那個 <a></a> 標籤其實被包在兩層 <div></div> 和一層 <p></p> 裡面。一旦確認了這個位置，我們就可以開始動手，利用「CSS 選取器」設定我們的觸發條件了。
用「CSS 選取器」設定觸發條件
GTM 左側面板選擇「觸發條件」 > 右上角「新增」 > 選擇觸發條件類型「僅連結」
選擇「部分的連結點擊」 > 條件選擇「Click Element」 > 下拉選單選擇「符合 CSS 選取器」 > 輸入 <a> tag 所在位置「 #onekey > div > p > a」
要設定「CSS 選取器」的觸發條件，記得一定要選擇「Click Element」（圖中標示 2 的欄位）。因為我們的目標是找出被點擊的那個元素，所以一定得用跟「Element」相關的變數來設定。
而在最右邊的欄位中，我們輸入這段 #onekey > div > p > a 代表的是：
我們的目標是定位網頁上某個特定的 <a></a> 標籤。這個標籤位於一個 <p> 標籤之下，而這個 <p> 又是某個 <div> 的子元素。最後，這個 <div> 則是屬於某個 ID 屬性為 onekey 的元素底下。
換句話說，在這種巢狀結構裡，每個元素都像是在一個家族中，存在著父母與孩子的關係。在這個例子裡，#onekey > div > p > a 表示 <a> 標籤是 <p> 的子元素，<p> 是 <div> 的子元素，而這個 <div> 則是 ID 為 onekey 的 <div> 的子元素。
前面我們提到過，id 屬性在網頁上應該是唯一的，意指不會有其他元素使用相同的 id。因此，當我們指定 id=”onekey” 下的 <a> 標籤時，這表示只有在使用者點擊屬於 id=”onekey” 的元素下的 <a> 標籤時，我們設定的觸發條件才會被滿足，相應的事件代碼才會被觸發。
（記住喔，如果是 id，前面要加「#」；如果是 class，則要加「.」。）
CSS 選取器有許多不同的寫法。在上面提到的觸發條件中，我們也可以這樣寫：
div#onekey > div.keychain > p.category > a
我們要找的是一個 <a> 標籤，它位於 class=”category” 的 <p> 標籤之內，而這個 <p> 又是 class=”keychain” 的 <div> 標籤下的子元素。進一步來說，這個 <div class=”keychain”> 又是 id=”onekey” 的 <div> 標籤下的子元素。
無論是哪種寫法，只要使用者點擊的連結符合這樣的結構關係，觸發條件就會被滿足，達到相同的結果。
當我們使用「CSS 選取器」時，最好避免寫得太過複雜或冗長。這是因為如果網頁進行了改版，或是網站工程師對界面進行了細微調整，刪除了我們所依賴的某個元素，那麼原本設定好的「CSS 選取器」可能就會失效。就拿我們剛才的例子來說，如果工程師刪除了 <div class=”keychain”> 這個元素，那麼我們設定的觸發條件就會不再有效。
我們之前提到過，id 屬性在網頁上是獨一無二的。在我們的例子中，幸運的是，存在一個 id 屬性，因此我們可以考慮進行如下改動：
div#onekey a
這樣的設定表示，我們要找的目標是所有位於 id 為 onekey 的 <div> 元素底下的 <a> 標籤。
你會注意到，我們在這裡把「>」符號替換成了「空格」。在「CSS 選取器」裡，「>」符號是用來表示直接的父子關係。但在這個案例中，我們不再需要透過其他元素來定位 <a> 標籤，只要是位於 <div id="onekey"> 底下的 <a> 標籤被點擊，觸發條件就會被滿足。
換句話說，我們不再依賴中間的元素來找到 <a> 標籤。即使 div.keychain 和 p.category 在網頁上不存在，我們的觸發條件依然有效，從而能夠成功觸發事件代碼。
幾個常用的「CSS 選取器」寫法
「CSS 選取器」的應用不僅限於設定點擊事件的觸發條件。它還廣泛應用於「DOM 元素」變數、「自訂 Javascript」變數，以及「元素可見度」觸發條件的設定。
以下我們會舉例幾個常見的基礎使用方式，未來在面對不同網站的結構時，你就會知道該如何設定符合需求的「CSS 選取器」了。
「p.keychain」：所有 class 屬性為 keychain 的 <p> tag 都會被選取。
「p.keychain.good」: 所有 class 屬性為 keychain good 的 <p> tag 都會被選取，這代表同一個 tag 裡的 class 有兩個值。
div.maldive, .palau：所有 class 屬性有 maldive 或是 palau 的 <div> tag 都會被選取，逗號代表的是「或」，逗號之後請用「空格」分開。
div#onekey：id 屬性為 onekey 的 <div> 會被選取。
div#onekey > div.keychain > p: 選取位於 <div> 元素 id 屬性為 onekey 底下的 <div> 元素 class 屬性為 keychain 底下的 p tag 。
也可以寫成 #onekey > .keychain > p。
a[data-id=”456″]：選取屬性 data-id 為 456 的 <a> tag。
div#onelaptop a：選取所有位於 id 為 onelaptop 底下的 <a> tag。注意這邊是用「空白」分開，而不是「 > 」，因此沒有父子關係（parent-child），只要層級隸屬於 <div id=”onelaptop”> 之下的 <a>，都會符合條件。
li:nth-child(1)：選取第一個 <li> tag，以此類推，後面括弧內的數字也可以改成（odd）或是（even），選擇列表中的單雙數。
div#specialid > *：最後面用一個 ＊號表示，意指所有母元素為 <div id="specilaid"> 的元素，都會符合我們要選取的條件。
a[href^=”www.abc.com”]：只要 <a> 標籤內的連結是 www.abc.com 開頭的，都會符合選取條件，如果把「^」改成「*」，變成 a[href*=”www.abc.com”]，代表只要 <a> 標籤內的連結有包含 www.abc.com，就符合選取條件。
btn.iambutton, btn.iambutton *：代表當有使用者點擊 class 為 iambutton 的按鈕以及其下一層的所有元素時，就會符合選取的條件，注意「*」與 btn.iambutton 之間有一個「空格」，「,」與 btn.iambutton 之間也是「空格」。
#id1,#id2,#id3,#id4：在「CSS 選取器」中，「 , 」逗號代表的是「或」的意思，如果你的頁面上有許多個 ID 需要追蹤，例如在使用「元素可見度」觸發條件時，你以 ID 作為觸發條件，而這樣的缺點是必須要建立好多個觸發條件，很容易造成觸發條件清單的混亂，就可以改用 「CSS 選取器」的方式，簡化「元素可見度」觸發條件的設定。
「CSS 選取器」的使用方式有很多種，這邊只是先列出基本的幾種寫法，如果還想要進一步學習的朋友，可以參考 W3C 的 CSS 即時預覽或是 W3C 的 CSS Selector 文件資料，都可以幫助你對「CSS 選取器」的使用有更深的認識。
使用檢查工具中的「Copy selector」
除了自己觀察以外，我們也可以使用「copy selector」的方式來幫我們找出「CSS 選取器」的層級。
檢查工具中對要選取的元素按「右鍵」> 選擇「Copy」> 選擇「Copy selector」
可以先找個地方貼上剛剛複製的 selector，如果網頁結構較複雜，選出來的可能會很長一串，會變成下面這樣：
post-14 > div.entry-content > div > div > ul > li.woocommerce-order-overview__total.total > strong > span > bdi
這正是為什麼我們前面花了這麼多時間解釋「CSS 選取器」的原理和範例。現在，你需要判斷哪些中間元素是非必要的。即使刪除這些元素，我們依然能準確選取到目標元素。
正如前面提到的，如果設定太長，一旦網頁進行了小幅度調整或大改版，只要有任何一個元素被移除或 class 名稱被更改，我們的「CSS 選取器」設定就可能會失效。
此外，要檢查我們所需元素的 class 與其他元素的 class 是否重複，可以參考我們之前介紹的「DOM 元素」變數文章。這裡就不再重複詳述。
總結一下
為了讓「CSS 選取器」更容易理解，本文一開始就簡單地介紹了什麼是「CSS」，包括它與 HTML 的關係，它在網頁設計中的重要角色，以及它的應用方式。
然後，我們深入講解了什麼是「CSS 選取器」，以及它如何幫助我們設定追蹤事件。我們還一步一步地解釋了如何在網頁中找到特定元素的位置，方便將其應用於觸發條件中。
此外，也提供了一些常見的「CSS 選取器」範例，並特別提醒大家避免讓選取器過長，以免影響未來的管理與維護。
作為結尾，我們還分享了兩個來自 W3C 的實用資源，這些資源不僅能助你學習，也能提供 CSS 選取器使用的參考。這對於處理那些沒有 class 或 id 的元素特別有幫助，為你提供更多的解決方案。
如果未來我們發現更多有趣的「CSS 選取器」應用，我們也會更新這篇文章來分享給大家。（雖然已經很長了）
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）