css - 我可以用什么工具来测试:contains() CSS3 pseudo-class in a browser?

Question

我正在尝试开发与 Selenium 一起使用的 CSS 选择器。特别是我想使用伪类:contains()。尽管 W3 有一个带有 :contains() 的 CSS3 草案，但最终版本似乎没有包含它。

我正在使用 Chrome 的工具来帮助我检查我的 CSS 选择器并确保我做的是正确的。 Chrome 似乎没有实现 :contains()，这是可以理解的。

有没有我可以使用的工具可以让我在我们的网页上试用使用 :contains() 的选择器？

我正在使用装有 Lion 的 Mac。我也可能仅限于使用 Firefox 3.5.7(我被告知暂时不要更新)。

Answer 1

jQuery 的选择器引擎也实现了 :contains()伪类。 It is to my knowledge jQuery 和 Selenium 以相同的方式实现它。

我不确定如何在不使用 jQuery 的网站上测试它，但在使用 jQuery 的网站上，只需启动浏览器的 JavaScript 控制台，然后在其中运行 jQuery 选择器控制台。

这是一个在 Chrome 的 JavaScript 控制台上查看 Stack Overflow 问题的示例(根据您是否登录，您可能会得到不同的结果):

> $("#mainbar div[id]:contains('selector')").get() /* DOM objects with .get() */

[<div class=​"question" id=​"question">​…​</div>​, <div id=​"answers">​…​</div>​, <div id=​"answer-9007154" class=​"answer">​…​</div>, <div id=​"answer-9008184" class=​"answer">​…​</div>​]