如何查找 CSS 选择器
了解如何识别文本区域、表单和输入字段的 CSS 选择器，以将 AI Anywhere 助手集成到您的网站中。
阅读时间 15 分钟
观看此视频教程，了解如何使用浏览器开发者工具查找 CSS 选择器。
CSS 选择器是用于选择网页上 HTML 元素的模式。在创建 AI Anywhere 助手时，您需要使用 CSS 选择器指定助手应定位的文本区域或表单字段。
方法 1：右键单击检查元素（推荐）
无需打开完整开发者工具即可找到选择器的最快最简单方法。
- 右键点击目标元素 （文本区域、输入字段等）
- 选择“检查元素” 从上下文菜单中
-
在元素面板中：
- 右键点击高亮的元素
- 选择 复制 → 复制选择器
方法 2：使用浏览器开发者工具
这是在任何网站上查找选择器的最可靠方法。
-
打开开发者工具：
- Chrome/Edge： 按 F12 或 Ctrl+Shift+I
- Firefox： 按 F12 或 Ctrl+Shift+I
- Safari： 按 Cmd+Option+I
-
选择元素：
- 点击 元素 开发者工具中的标签
- 点击 选择元素 工具（光标图标）在左上角
- 点击您要定位的文本区域或表单字段
-
复制选择器：
- 右键点击元素面板中高亮的元素
- 选择 复制 → 复制选择器
- 将此选择器粘贴到您的 AI Anywhere 助手配置中
示例： If you select a textarea with id="comments", you'll get:
#comments
方法 3：手动创建选择器
通过理解 HTML 结构来学习手动创建选择器。
常见选择器模式：
#element-id /* 通过ID定位元素 */
.class-name /* 通过类定位元素 */
input[type="text"] /* 定位特定输入类型 */
textarea /* 定位所有文本区域 */
form .field /* 定位表单内的元素 */
示例：
通过ID：
通过类：
通过类型：
通过属性：
#message 目标 <textarea id="message">通过类：
.comment-box 目标 <textarea class="comment-box">通过类型：
input[type="email"] 定位电子邮件输入字段通过属性：
textarea[name="description"] 定位名称为"description"的文本区域
常见选择器示例
文本区域：
#comments /* ID为"comments"的文本区域 */
.message-box /* 类为"message-box"的文本区域 */
textarea[name="bio"] /* 名称为"bio"的文本区域 */
输入字段：
#email /* ID为"email"的输入 */
input[type="text"] /* 所有文本输入 */
.form-control /* Bootstrap表单控件 */
表单元素：
#contact-form textarea /* 联系表单内的文本区域 */
.comment-section input /* 评论部分内的输入 */
.editor textarea /* 编辑器内的文本区域 */
WordPress特定选择器
WordPress支持超过40%的网站，因此这里是您在WordPress网站上会遇到的最常见选择器。
WordPress管理仪表板选择器：
#content /* 主要内容编辑器（Gutenberg/经典） */
.wp-editor-area /* 经典编辑器文本区域 */
.block-editor-default-block-appender__content /* Gutenberg块编辑器 */
.editor-post-title__input /* 文章标题字段 */
WordPress评论表单：
#comment /* 主要评论文本区域 */
#respond textarea /* 评论部分的文本区域 */
.comment-form textarea /* 评论表单文本区域 */
#commentform textarea /* 备用评论表单选择器 */
WordPress联系表单（Contact Form 7, Gravity Forms等）：
.wpcf7-textarea /* Contact Form 7文本区域 */
.gform_wrapper textarea /* 重力表单文本区域 */
.wpforms-field-textarea /* WPForms 文本区域 */
WordPress 页面构建器：
/* Elementor */
.elementor-widget-text-editor textarea
.elementor-text-editor
/* Beaver Builder */
.fl-builder-content textarea
/* Divi Builder */
.et_pb_text_inner textarea
/* 古腾堡区块 */
.wp-block-paragraph textarea
WordPress 主题特定选择器：
/* 二零二四主题 */
.wp-site-blocks textarea
/* Astra 主题 */
.ast-separate-container textarea
/* GeneratePress 主题 */
.inside-article textarea
/* OceanWP 主题 */
.content-area textarea
WordPress 提示： 许多 WordPress 主题使用通用选择器，如
textarea 或 input[type="text"]. 在使用更具体的选择器之前，先测试这些。
WordPress 警告： WordPress 站点通常有多个插件可能会改变 HTML 结构。主题或插件更新后，请务必测试您的选择器。
逐步查找 WordPress 选择器：
-
识别 WordPress 元素：
- 是文章编辑器、评论表单还是联系表单？
- 您是在 WordPress 管理仪表盘还是在前端？
- 使用的是哪个主题或页面构建器？
-
使用浏览器开发者工具：
- 右键单击文本区域或输入字段
- 选择“检查元素”
- 查找 WordPress 特定的类或 ID
-
检查 WordPress 类：
- 查找以
wp-,gutenberg-, 或editor- - 检查主题特定的类
- 查找插件特定的类（如
wpcf7-用于 Contact Form 7）
- 查找以
常见的 WordPress 插件选择器：
/* WooCommerce */
.woocommerce textarea
#order_comments
/* Yoast SEO */
#yoast_wpseo_metadesc
#yoast_wpseo_focuskw
/* 高级自定义字段 */
.acf-field textarea
/* 自定义文章类型 UI */
.cptui textarea
/* WP All Import */
.wpallimport textarea
WordPress 多站点注意事项：
多站点提示： 在 WordPress 多站点安装中，子域名与子目录的某些选择器可能不同。请在您要定位的特定站点上进行测试。
测试您的选择器
始终测试您的选择器以确保它们正常工作。
-
打开浏览器控制台：
- 按 F12 以打开开发者工具
- 转到 控制台 选项卡
-
测试选择器：
- 输入：
document.querySelector('your-selector-here') - 按回车键
- 如果返回元素，则您的选择器有效！
- 输入：
// 测试示例：
document.querySelector('#comments') // 应返回文本区域元素
document.querySelector('.message-box') // 应返回具有该类的元素
document.querySelector('textarea[name="bio"]') // 应返回名称为"bio"的文本区域
提示和最佳实践
专业提示： 尽可能使用ID选择器——它们是最具体和可靠的。
最佳实践： 避免过于复杂的选择器。简单的选择器更易于维护。
警告： 如果您的网站使用动态内容或JavaScript框架，选择器可能会更改。请彻底测试！
选择器优先级（从好到差）：
- ID选择器：
#element-id（最可靠） - 类选择器：
.class-name - 属性选择器：
input[type="text"] - 标签选择器：
textarea（最不具体）
常见问题排查
选择器不起作用？
- 检查拼写错误： 选择器区分大小写
- 验证元素是否存在： 使用浏览器控制台进行测试
- 检查动态内容： 某些元素在页面加载后加载
- 尝试更简单的选择器： 使用ID或类代替复杂路径
匹配多个元素？
- 使选择器更具体： 添加父元素或唯一属性
- 使用 nth-child：
textarea:nth-child(2)用于第二个文本区域 - 添加唯一标识符： 请开发人员为目标元素添加 ID
选择器检查清单
Before moving forward, make sure you've completed these steps:
✓ 选择器已找到
✓ 已测试
✓ 已保存
说明：
- 选择器已找到： You've identified a working CSS selector using one of the methods above
- 已测试： You've verified the selector works by testing it in your browser console
- 已保存： You've recorded the selector in your Helper configuration or saved it for later use
