# CSS 选择器

## CSS 选择器是什么？

要使用自动点击、自动登录、分页模板等功能，需要指定要点击元素的 Selector 值。本说明将引导如何获取该 Selector 值。

{% hint style="success" %}
**CSS Selector（选择器）是指应用样式属性的元素**。简单来说，网站基本上由无数标签组成，为了在代码上应用设计，可以说是赋予网页中存在的各个元素的特定值。在 Listly 说明中看到 CSS Selector 时，可以理解为**特定选择元素（例：按钮、输入框等）具有的代码值**。
{% endhint %}

***

## 使用方法

### A1. 获取选择器值

{% stepper %}
{% step %}

#### 用 PARTS 获取 CSS 选择器值

利用 Listly PARTS 可以快速简便地获取 CSS Selector 值。

{% hint style="success" %}
**Listly 图标**点击 → **\[部分+]** 选择 → 点击想要的元素
{% endhint %}

通过上述过程可以在侧边面板直接确认想要元素的 Selector 值。点击 CSS Selector（选择器）栏的 **\[Copy 图标]** 即可轻松复制该值。

<figure><img src="/files/2a41f43631df88a88610401c8f06bb61da6a754a" alt=""><figcaption></figcaption></figure>

复制值后，用键盘 Ctrl+V 粘贴到需要 Selector 值的设置栏使用即可。

<figure><img src="/files/adcc032bf458b44034955c413c43d6dfefbfea27" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### 用开发者工具获取 CSS 选择器值（Legacy）

(1) 在按钮或输入框等元素上右键点击，选择 **\[检查]**。

<figure><img src="/files/56a6c904409016eaeb9f6d7f8fb4227400a9de4f" alt=""><figcaption></figcaption></figure>

(2) 屏幕右侧或下方会出现代码窗口。刚才选择的元素对应的代码会以灰色显示，将鼠标移到代码上，屏幕上该区域会以颜色强调显示。

<figure><img src="/files/fd9d371626b8402580771cf48e43ded6dfc21482" alt=""><figcaption></figcaption></figure>

(3) 在灰色强调的代码上右键点击，选择 Copy -> Copy selector，该 selector 的值就会被复制。

<figure><img src="/files/0d81f58d55ae7326588c6764db4c0a43e7073625" alt=""><figcaption></figcaption></figure>

(4) 前往设置窗口，在需要输入选择器值的位置用键盘 Ctrl+V 或右键后选择「粘贴」，粘贴刚才复制的值后保存。

<figure><img src="/files/04a9a013f80174b6b734ec1fd578ea4f755fd648" alt=""><figcaption></figcaption></figure>
{% 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="/files/3ea8428e43ccdf7ed628aaf48561bb136013b9cb" alt=""><figcaption></figcaption></figure>

* <mark style="background-color:$success;">**解决方法-2（使用开发者工具时）**</mark>：在开发者工具将鼠标移到代码上时，该元素区域会强调显示。这时同样选择**不超过按钮区域的最大框**，复制 CSS Selector 值。

<figure><img src="/files/93a462b1290843aced298b85b1231a367becd947" 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-hans/~/revisions/kXguiYLELsdptOakt4OC/getting-started/extension-features/css-selector.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.