如何在Chrome devtools元素检查器中搜索标签+属性？

我在 devtool 中进行了简单的搜索，但它无缘无故地急剧下降：

更重要的是，如果我查看源代码并进行相同的搜索，结果数<link rel只是58，而不是184。你知道为什么吗？

_{Here is the if you need to examine.}

对于这些“复杂”查询，您必须使用 xPath 选择器：

• //link[@rel]
• //link[contains(@rel,'style')]

或 CSS 选择器：

• link[rel]
• link[rel*="style"]

对于像这样的简单 CSS 选择器a use html a相反，以确保它与文字文本不匹配。

支持的查询列表

Devtools使用CDP命令DOM.performSearch https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-performSearch并通过判断执行 https://source.chromium.org/search?q=symbol:InspectorDOMAgent::performSearch%20file:cc它尝试匹配这些类型的查询：

• text- #text 节点内部（如 js 中的 textContent）

• text- 内部标签名称

• text- 内部属性名称

• text- 内部属性值

• <tag- 匹配标签名称的开头

• </tag- 匹配结束标签

• tag>- 匹配标签名称末尾

• <tag>- 匹配整个标签名称

• "text- 匹配属性值的开头

• text"- 匹配属性值末尾

• text- 匹配整个属性值

• //a[contains(., 'foo')]- XPath选择器

• a#foo.class[attr]- CSS选择器

正如您所看到的，文字文本匹配仅限于前四种类型，并且它不会找到跨越多种类型的内容，例如attr="value"跨越两种类型。