CSS 选择器 - 子字符串

17 Mar 2025 | 阅读 2 分钟

它允许匹配部分字符串以定位特定的网页元素。

使用 CSS 选择器匹配字符串的方式有三种。

  1. 匹配前缀
  2. 匹配后缀
  3. 匹配子字符串

我们将通过一个例子详细介绍每种机制。

1. 匹配前缀

  • 它允许我们使用匹配的前缀访问特定字符串。
  • 语法:css=<HTML 标签><[属性^=字符串的前缀]>
  • ^ - 用于使用前缀匹配字符串的符号表示法。
  • 字符串的前缀 - 执行匹配操作所依据的字符串。
  • 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name^='pass']
  • 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。

Selenium CSS Selector - Sub-string

2. 匹配后缀

  • 它允许我们使用匹配的后缀访问特定字符串。
  • 语法:css=<HTML 标签><[属性$=字符串的后缀]>
  • $ - 用于使用后缀匹配字符串的符号表示法。
  • 字符串的后缀 - 执行匹配操作所依据的字符串。
  • 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name$='ord']
  • 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。

Selenium CSS Selector - Sub-string

3. 匹配子字符串

  • 它允许我们使用匹配的子字符串访问特定字符串。
  • 语法:css=<HTML 标签><[属性*=子字符串]>
  • * - 用于使用子字符串匹配字符串的符号表示法。
  • 子字符串 - 执行匹配操作所依据的字符串。
  • 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name*='word']
  • 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。

Selenium CSS Selector - Sub-string