我可以使用啥工具在浏览器中测试 :contains() CSS3 伪类？

Posted 2023-03-06

【中文标题】我可以使用啥工具在浏览器中测试 :contains() CSS3 伪类？

【英文标题】：What tool can I use to test the :contains() CSS3 pseudo-class in a browser?我可以使用什么工具在浏览器中测试 :contains() CSS3 伪类？

【发布时间】：2012-02-18 21:26:54

【问题描述】：

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

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

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

我正在使用带有 Lion 的 Mac。我也可能仅限于使用 Firefox 3.5.7（我被告知暂时推迟更新）。

【问题讨论】：

什么最终版本？时至今日，CSS3 模块仍然主要是草稿......

@Šime Vidas：是的，主要是，但是选择器模块在去年 9 月毕业于 W3C 推荐标准。它现在甚至有一个非常酷的 URL：w3.org/TR/selectors

@BoltClock 啊，我明白了。选择器达到推荐。不错的网址:)

顺便说一句，它甚至不在Selectors Level 4。

【参考方案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>​]

【讨论】：

许多选择器引擎，如 Sizzle (jquery) 或 Slick (mootools) - 实现 :contains 选择器。

【参考方案2】：

我没有在任何地方看到 :contains() 选择器，我自己也从未遇到过。

没有出现伪类：http://caniuse.com/#search=contain

【讨论】：

嗯，它肯定存在于 Selenium 中。我面前有使用它的工作代码。看这里Sauce Labs Blog

Huliax 是正确的； :contains() 是一个旧的 CSS3 伪类，在 2001 年的某个时候提出，但在 2005 年放弃了。无论如何，它仍然在 Selenium 中实现。看我的回答。

感谢@BoltClock 的澄清！我年纪大了，聪明了:)

即使在 Selnium（实际上是 WebDriver API）中，它也已被弃用。你真的不应该使用它。

@Ross Patterson：很高兴知道。感谢您的提醒。