小编典典

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

css

我检查这个选择器:

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

选择器不起作用?

我在firefinder中检查了此内容,但没有返回任何内容(没有信息显示零元素)

然后检查:

h3:nth-child(1)

并返回h3,所以选择器几乎是不错的选择,但是this(h3的文本为’a’)的文本出错。


阅读 524

收藏
2020-05-16

共1个答案

小编典典

:contains() 不是 原本是CSS3选择器感谢TJCrowder的链接,但它没有做到,很可能是因为它的工作方式往往会导致严重的性能和过度选择问题。例如,如果元素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选择器具有更好的浏览器支持。

2020-05-16