Question

有没有办法可以将以下内容表达为单个CSS选择器？（或者除了使用CSS选择器直到第4级成为现实之外我还需要找到一些其他的方法吗？参见：http://www.w3.org/TR/selectors4/#subject）

我想......

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

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

这适用于Selenium Webdriver。

Answer 1

不幸的是，使用单个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()]

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

1 个答案: