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

Question

我检查这个选择器：h3:nth-child(1):contains('a') 选择器不起作用？我在firefinder中检查了此内容，但没有返回任何内容（没有信息显示零元素）然后检查：h3:nth-child(1)并返回h3，所以选择器几乎是不错的选择，但是this（h3的文本为'a'）的文本出错。

Answer 1

:contains() 不是原本是CSS3选择器（感谢TJ Crowder的链接），但它没有做到，很可能是因为它的工作方式往往会导致严重的性能和过度选择问题。例如，如果元素E匹配:contains()给定的字符串参数，则其所有祖先也将匹配；将其与通用选择器一起使用会导致某些样式属性带来意想不到的结果，而且浏览器速度很慢。

没有其他CSS选择器可达到的目的:contains()。因此，您必须找到其他方法，通过修改HTML甚至使用jQuery的方法:contains()来实现所需的效果：

如果h3元素

是其父元素的第一个子元素

且其文本包含字母“ a” ，则选择该元素。

对于jQuery和Selenium RC用户： :contains()在jQuery使用的Sizzle选择器引擎中实现，该引擎也在Selenium RC（但不是 Selenium WebDriver）中使用。它按照CSS3规范这个已有十多年的修订版中的描述进行工作，但是同样，由于该规范对它的描述方式，您需要谨慎使用它，否则可能会导致意外选择。

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

Answer 2

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

h3:nth-child(1) a

要么

h3:first-child a