当前位置: 首页 > 面试题库 >

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

朱修德
2023-03-14
问题内容

我检查这个选择器:

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

选择器不起作用?

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

然后检查:

h3:nth-child(1)

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


问题答案:

: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选择器具有更好的浏览器支持。



 类似资料:
  • 问题内容: 我正在尝试更改div内奇数div的样式。由于某种原因,当它位于另一个div内时,它会影响我的所有div。这是我的常规div和奇数div的代码: 出于某种原因,当将其包裹在我的div中时不起作用,但是当它们不包裹在任何div中时却起作用。 未包装在div中时的工作版本: ``如何使初始代码与上述代码相同? 问题答案: 类似于它们必须全部来自同一父级。如果需要这些包装器,请改用这些包装器:

  • 问题内容: 除非不应该这样,但我似乎无法承认类选择器。 我在另一个div内说了4个div,所有的类和id都在上面。我需要选择具有该类的div的第一个实例。例如: 并且显然再次获得相同的效果,但它不会影响任何div。 现在,如果我要强制它与该div一起使用,我可以这样做: 碰巧它是#content中的第3个div,这毫无意义,因为我需要使用该类获取任何东西的第一个实例。 这是HTML的示例,我已经尝

  • 问题内容: 以以下代码为例: 是否可以使用或不选择全部元素的 一半 ?在上面的例子中,代码应该选择前/后 两个 s,然后如果我将s 的数量增加到六个,它将选择前/后 三个 。 我觉得我将不得不使用JavaScript … 问题答案: 在纯CSS中,您能够获得与之 接近 的唯一方法是对或进行选择。如果您只需要最后一半(而不是奇数或偶数),则必须使用JavaScript / jQuery。 使用jQu

  • 问题内容: 我正在使用选择器为不同的社交图标添加背景图像。但是,所有图标都显示相同。我究竟做错了什么? 问题答案: 所述选择器计数的兄弟姐妹(即,元件具有相同父节点)。 在您的HTML结构中,始终是的第一个,最后一个也是唯一的孩子。因此只有一个要计数的元素。 但是,存在多个锚元素,所有锚元素都是同级(的子级),因此可以针对每个锚元素。

  • 问题内容: 编辑:我已将此错误报告给Apple,现已关闭,已在Beta iOS 9.0(13A4254v)上进行了测试,并且可以正常运行。 编辑以获得更好的解释: 我在网页中有一堆文章,所有文章都包裹在div(列)中。这些文章的类具有绝对位置,并且宽度和高度固定。 有一个按钮可以应用:-到包装器/列的translation3d-一个window.history.pushState 所有样式都正确地

  • 问题内容: 当我编写一些CSS时,在使用外观之前从未遇到过这种情况,并且我怀疑实际发生了什么。 使用伪类时,我会在选择器之间没有空格的情况下编写它们,如下所示: 但是它没有按我预期的方式工作,所以我尝试在选择器和伪类之间插入一个空格。令人惊讶的是,它的工作原理是: 使这项工作发生了什么事? 问题答案: 您误会了选择器。它选择的元素也是,该元素 也具有 前面的元素作为父元素。 如果前面没有选择器,则