search

CSS 選擇器

hashtag
什麼是 CSS 選擇器？

要使用自動點擊、自動登入、分頁範本等功能，需要指定要點擊元素的 Selector 值。本說明將介紹如何取得該 Selector 值。

circle-check

CSS Selector（選擇器）是指套用樣式屬性的元素。簡單來說，網站基本上由許多標籤組成，而 CSS Selector 是為了在代碼上套用設計，賦予網頁中各個元素的特定值。在 Listly 說明中提到 CSS Selector 時，您可以理解為特定選擇元素（例如：按鈕、輸入框等）所具有的代碼值。

hashtag
使用方法

hashtag
A1. 取得選擇器值

1

hashtag
使用 PARTS 取得 CSS 選擇器值

使用 Listly PARTS 可以快速輕鬆地取得 CSS Selector 值。

circle-check

點擊 Listly 圖示 → 選擇 [PARTS] → 點擊想要的元素

透過上述步驟，您可以在側邊面板中直接確認想要元素的 Selector 值。點擊 CSS Selector（選擇器）欄位的 [複製圖示] 即可輕鬆複製該值。

複製值後，在需要 Selector 值的設定欄位中使用鍵盤 Ctrl+V 貼上即可使用。

2

hashtag
使用開發者工具取得 CSS 選擇器值（舊方法）

1

在按鈕或輸入框等元素上按滑鼠右鍵，選擇 [檢查]。

2

畫面右側或下方會出現代碼視窗。剛才選擇的元素對應的代碼會以灰色顯示，將滑鼠移到代碼上時，該區域會在畫面上以顏色強調顯示。

3

在灰色強調顯示的代碼上按滑鼠右鍵，選擇 Copy -> Copy selector，該 selector 的值就會被複製。

4

移至設定視窗，在需要輸入選擇器值的位置使用鍵盤 Ctrl+V 或滑鼠右鍵點擊「貼上」，將剛才複製的值貼上後儲存。

hashtag
A2. 輸入了 Selector 但無法正常運作的情況

在大多數網站中，輸入第 1 步驟取得的 Selector 值就能正常運作。 但如果輸入了 Selector 值卻無法得到想要的結果，請確認以下方法。

1

hashtag
設計變更程式的干擾

  • 問題：由於滑鼠游標設計、瀏覽器主題變更、設計修正用擴充功能等，可能一起複製了不必要的 CSS 代碼。CSS 是與網頁設計相關的代碼，因此如果有相關程式正在執行，請關閉設定後重新複製 Selector 值。

2

hashtag
上層/相鄰標籤包含必要資訊的情況

  • 問題：主要資訊可能包含在上層標籤（父元素）而非最初選擇的元素中。

  • 解決方法-1（使用 PARTS 時）：從最初選擇的元素點擊向上箭頭（↑），調整選取區域。請擴展到不超出按鈕區域的最大方塊並使用該值。

  • 解決方法-2（使用開發者工具時）：在開發者工具中將滑鼠移到代碼上時，該元素區域會強調顯示。此時同樣選擇不超過按鈕區域的最大方塊來複製 CSS Selector 值。

Previous分頁-開啟的分頁Next表格資料

Was this helpful?