# CSS 選擇器

## 什麼是 CSS 選擇器？

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

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

***

## 使用方法

### **A1. 取得選擇器值**

{% stepper %}
{% step %}

#### 使用 PARTS 取得 CSS 選擇器值

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

{% hint style="success" %}
**點擊 Listly 圖示** → 選擇 **\[PARTS]** → 點擊想要的元素
{% endhint %}

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

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/fEIk84h48pfNqA1OVeWg/image.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/9bnysBTglSNAPJxSVzFN/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

{% stepper %}
{% step %}
在按鈕或輸入框等元素上按滑鼠右鍵，選擇 **\[檢查]**。

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/1TNq8uMxRFyqFvQVlWFs/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/ba4aEAEIncdO8Y4d0C3t/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/aBwVCfjmdiZyFIHTCaef/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/iLJDhOmBRRjRkXmOAkfv/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}
{% endstep %}
{% endstepper %}

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

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

{% stepper %}
{% step %}

#### 設計變更程式的干擾

* <mark style="background-color:$success;">**問題**</mark>：由於滑鼠游標設計、瀏覽器主題變更、設計修正用擴充功能等，**可能一起複製了不必要的 CSS 代碼**。CSS 是與網頁設計相關的代碼，因此如果有相關程式正在執行，請關閉設定後重新複製 Selector 值。
  {% endstep %}

{% step %}

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

* <mark style="background-color:$success;">**問題**</mark>：主要資訊可能包含在上層標籤（父元素）而非最初選擇的元素中。
* <mark style="background-color:$success;">**解決方法-1（使用 PARTS 時）**</mark>：從最初選擇的元素點擊**向上箭頭（↑）**，調整選取區域。請擴展到**不超出按鈕區域的最大方塊**並使用該值。

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/CCbCMDFgHn4KO9dgrrip/Parts%20%E1%84%89%E1%85%A6%E1%86%AF%E1%84%85%E1%85%A6%E1%86%A8%E1%84%90%E1%85%A5%E1%84%80%E1%85%A1%E1%86%B9.gif" alt=""><figcaption></figcaption></figure>

* <mark style="background-color:$success;">**解決方法-2（使用開發者工具時）**</mark>：在開發者工具中將滑鼠移到代碼上時，該元素區域會強調顯示。此時同樣選擇**不超過按鈕區域的最大方塊**來複製 CSS Selector 值。

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/SrSdimzxU3zcarnxN1JT/%E1%84%80%E1%85%A2%E1%84%87%E1%85%A1%E1%86%AF%E1%84%8C%E1%85%A1%E1%84%83%E1%85%A9%E1%84%80%E1%85%AE%20%E1%84%89%E1%85%A6%E1%86%AF%E1%84%85%E1%85%A6%E1%86%A8%E1%84%90%E1%85%A5%E1%84%80%E1%85%A1%E1%86%B9.gif" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.listly.io/docs/zh-hant/getting-started/extension-features-zh-hant/css-selector-zh-hant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.