3

有没有办法可以将以下内容表达为单个 CSS 选择器？（或者除了使用 CSS 选择器之外，我是否必须找到其他方法来做到这一点，直到第 4 级成为现实？请参阅：http ://www.w3.org/TR/selectors4/#subject ）

我想要……</p>

  • 唯一的div（未知类）
  • 有一个名为“foo”的 div 孙子
  • 并且有一个带有“bar baz”类的祖父母div

页面上有两个 div 有一个名为“foo”的孙子。我只想将具有祖父母 div 的那个与“bar baz”类匹配。

这适用于 Selenium Webdriver。

4

1 回答 1

3

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

标准“有一个祖父 div”需要在选择器级别 4 中引入的主题选择器，这将导致以下选择器（假设“标题”意味着“具有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()]

如果您正在寻找与class祖父母的属性完全匹配的内容，请改用此 XPath（同样未经测试）：

(
  //div[@class="bar baz"]
    /*
      /div[child::*/child::div[@title="foo"]]
)[1][last()]
于 2013-01-15T02:01:48.800 回答