为什么选择器h3:nth-​​child(1):contains('a')不起作用？

Question

我检查这个选择器:

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

选择器不起作用？

我在firefinder中检查这个并且什么也没有返回(不知道零元素的信息)

然后检查一下:

h3:nth-child(1)

并且它返回h3,所以选择器几乎是好的,但是这个(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选择器有更好的浏览器支持.