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

【问题标题】：CSS selector based on parent and child nodes?基于父节点和子节点的CSS选择器？
【发布时间】：2012-12-29 02:20:22
【问题描述】：

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

我想要……

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

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

这适用于 Selenium Webdriver。

【问题讨论】：

等待css 4或使用js
这正是 xpath 的情况

标签： selenium webdriver css-selectors

【解决方案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，要么是 -1，我真的怀疑 CSS 在其他情况下是否正常工作
@mikakun：当然不行。也许我应该明确说明这一点。您也可以通过再次单击向下箭头来撤消您的否决而不投赞成票 - 从这个意义上说，它的行为就像一个切换按钮。我还将添加一个 XPath 替代方案，以防 OP 能够使用它。
确实；但是提供一个不起作用的答案有什么意义呢？
@mikakun：OP 确实提到了 Selectors 4，所以我想我会提供一个理论示例。也就是说，我已经编辑了我的答案。
@BoltClock：对不起，如果这是一个愚蠢的问题，但 xpath 中的换行符重要吗？ /* 和 */ 是否以某种方式标记 xpath 的“主题”？