有没有办法可以将以下内容表达为单个 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。
最佳答案
不幸的是,这对于单个 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()]
关于selenium - 基于父子节点的 CSS 选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14330042/