要使用自動點擊、自動登入、分頁範本等功能,需要指定要點擊元素的 Selector 值。本說明將介紹如何取得該 Selector 值。
CSS Selector(選擇器)是指套用樣式屬性的元素。簡單來說,網站基本上由許多標籤組成,而 CSS Selector 是為了在代碼上套用設計,賦予網頁中各個元素的特定值。在 Listly 說明中提到 CSS Selector 時,您可以理解為特定選擇元素(例如:按鈕、輸入框等)所具有的代碼值。
使用 Listly PARTS 可以快速輕鬆地取得 CSS Selector 值。
點擊 Listly 圖示 → 選擇 [PARTS] → 點擊想要的元素
透過上述步驟,您可以在側邊面板中直接確認想要元素的 Selector 值。點擊 CSS Selector(選擇器)欄位的 [複製圖示] 即可輕鬆複製該值。
複製值後,在需要 Selector 值的設定欄位中使用鍵盤 Ctrl+V 貼上即可使用。
在按鈕或輸入框等元素上按滑鼠右鍵,選擇 [檢查]。
畫面右側或下方會出現代碼視窗。剛才選擇的元素對應的代碼會以灰色顯示,將滑鼠移到代碼上時,該區域會在畫面上以顏色強調顯示。
在灰色強調顯示的代碼上按滑鼠右鍵,選擇 Copy -> Copy selector,該 selector 的值就會被複製。
移至設定視窗,在需要輸入選擇器值的位置使用鍵盤 Ctrl+V 或滑鼠右鍵點擊「貼上」,將剛才複製的值貼上後儲存。
在大多數網站中,輸入第 1 步驟取得的 Selector 值就能正常運作。 但如果輸入了 Selector 值卻無法得到想要的結果,請確認以下方法。
問題:由於滑鼠游標設計、瀏覽器主題變更、設計修正用擴充功能等,可能一起複製了不必要的 CSS 代碼。CSS 是與網頁設計相關的代碼,因此如果有相關程式正在執行,請關閉設定後重新複製 Selector 值。
問題:主要資訊可能包含在上層標籤(父元素)而非最初選擇的元素中。
解決方法-1(使用 PARTS 時):從最初選擇的元素點擊向上箭頭(↑),調整選取區域。請擴展到不超出按鈕區域的最大方塊並使用該值。
解決方法-2(使用開發者工具時):在開發者工具中將滑鼠移到代碼上時,該元素區域會強調顯示。此時同樣選擇不超過按鈕區域的最大方塊來複製 CSS Selector 值。
Was this helpful?