Question

我检查了这个选择器：

h3:nth-child(1):contains('a')

选择器不起作用？

我在firefinder中检查这个并且什么都没有返回（不是没有元素的信息）

然后检查一下：

h3:nth-child(1)

并且它返回h3，因此选择器几乎是好的，但是这个（h3有文本'a'）文本出错了。

Answer 1

:contains() 不是将成为CSS3选择器（thanks T.J. Crowder for the link），但它没有成功，很可能是因为它的工作方式往往导致严重的表现和过度选择问题。例如，如果元素E与给定字符串参数的:contains()匹配，则其所有祖先也将匹配;将它与通用选择器一起使用会导致某些样式属性出现意外结果，除了浏览器速度慢之外。

没有其他CSS选择器可用于:contains()之类的目的。因此，您必须通过修改HTML或使用jQuery的:contains()找到其他方法，以达到您想要的效果：

选择h3元素
如果它是其父母的第一个孩子它的文字包含字母'a'。

对于jQuery和Selenium RC用户： :contains()是在jQuery使用的Sizzle选择器引擎中实现的，它也用于Selenium RC（但不是 Selenium WebDriver）。它的工作原理如in this decade-old revision of the CSS3 spec所示，但同样，由于规范的描述方式，您需要小心使用它，否则可能会导致意外选择。

最后一点，h3:nth-child(1)可以替换为h3:first-child，因为CSS2选择器可以提供更好的浏览器支持。

Answer 2

如果您尝试使用:contains(a)查找锚标记（而不是字母 A ），您可以使用：

h3:nth-child(1) a

或

h3:first-child a

Answer 3

<块引用>

:contains() 伪类不在 CSS 规范中，Firefox 或 Chrome 都不支持。

您可以在以下位置找到一些详细的讨论：

解决方案

作为一种解决方案，您必须删除 contains() 部分，您的有效定位器将是：

h3:nth-child(1)

正如@BoltClock 在他的回答中提到的那样，您还可以使用：

h3:first-child

作为替代，您还可以使用：

h3:first-of-type

为什么选择器h3：nth-child（1）：contains（'a'）不起作用？

3 个答案:

解决方案

tl;博士

为什么选择器h3：nth-​​child（1）：contains（'a'）不起作用？

3 个答案:

解决方案

tl;博士

为什么选择器h3：nth-child（1）：contains（'a'）不起作用？