selenium - 基于父子节点的 CSS 选择器？

Question

有没有办法可以将以下内容表达为单个 CSS 选择器？ (或者在第 4 级成为现实之前，除了使用 CSS 选择器之外，我是否还必须找到其他方法来执行此操作？请参阅:http://www.w3.org/TR/selectors4/#subject)

我想要……

• 唯一 div(未知类别)
• 有一个名为“foo”的 div 孙子
• 并且有一个祖 parent div 类为“bar baz”

页面上有两个 div，它们的孙子标题为“foo”。我只想将祖 parent div 与“bar baz”类相匹配。

这适用于 Selenium Webdriver。

Answer 1

不幸的是，这对于单个 CSS 选择器来说是不可能的。

条件“具有祖 parent div”需要在选择器级别 4 中引入主题选择器，这将产生以下选择器(假设“titled”表示“具有等于”的 title 属性) :

div.bar.baz > * > !div > * > div[title="foo"]

并且没有办法选择整个页面中第 n 个或唯一出现的元素，因此使用 CSS 选择器永远无法满足您的第一个条件。更不用说上面的方法无论如何也行不通，因为目前还没有任何浏览器实现 Selectors 4。

您可能最好使用 DOM 遍历或 XPath。我正在考虑的 XPath 表达式要复杂得多，但它可以找到整个页面中元素的唯一出现(如果我正确的话......你可能需要测试它在您自己的页面上):

(
  //div[contains(concat(' ', @class, ' '), ' bar ') and contains(concat(' ', @class, ' '), ' baz ')]
    /*
      /div[child::*/child::div[@title="foo"]]
)[1][last()]

如果您正在寻找祖 parent 的 class 属性的完全匹配项，请改用此 XPath(再次未经测试):

(
  //div[@class="bar baz"]
    /*
      /div[child::*/child::div[@title="foo"]]
)[1][last()]