CSS 选择器 - 子字符串17 Mar 2025 | 阅读 2 分钟 它允许匹配部分字符串以定位特定的网页元素。 使用 CSS 选择器匹配字符串的方式有三种。 - 匹配前缀
- 匹配后缀
- 匹配子字符串
我们将通过一个例子详细介绍每种机制。 1. 匹配前缀- 它允许我们使用匹配的前缀访问特定字符串。
- 语法:css=<HTML 标签><[属性^=字符串的前缀]>
- ^ - 用于使用前缀匹配字符串的符号表示法。
- 字符串的前缀 - 执行匹配操作所依据的字符串。
- 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name^='pass']
- 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。
 2. 匹配后缀- 它允许我们使用匹配的后缀访问特定字符串。
- 语法:css=<HTML 标签><[属性$=字符串的后缀]>
- $ - 用于使用后缀匹配字符串的符号表示法。
- 字符串的后缀 - 执行匹配操作所依据的字符串。
- 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name$='ord']
- 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。
 3. 匹配子字符串- 它允许我们使用匹配的子字符串访问特定字符串。
- 语法:css=<HTML 标签><[属性*=子字符串]>
- * - 用于使用子字符串匹配字符串的符号表示法。
- 子字符串 - 执行匹配操作所依据的字符串。
- 例如,我们将为 Test and Quiz 登录页面的 "Password" 文本框定义 CSS 选择器:css=input#password[name*='word']
- 单击 "在页面中查找目标" 按钮以检查定义的 CSS 选择器是否定位了所需的元素。

|