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

时间:2011-01-24 10:54:49

标签: css css3 css-selectors

我检查了这个选择器:

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

选择器不起作用?

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

然后检查一下:

h3:nth-child(1)

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

3 个答案:

答案 0 :(得分:19)

: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选择器可以提供更好的浏览器支持。

答案 1 :(得分:3)

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

h3:nth-child(1) a

h3:first-child a

答案 2 :(得分:1)

<块引用>

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

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


解决方案

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

h3:nth-child(1)

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

h3:first-child

作为替代,您还可以使用:

h3:first-of-type

tl;博士