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

Why doesn#39;t the selector h3:nth-child(1):contains(#39;a#39;) work?(为什么选择器 h3:nth-child(1):contains(a) 不起作用?)

问题描述

我检查了这个选择器:

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

选择器不起作用?

我在 firefinder 中检查了这个并没有返回任何内容(不是零元素的信息)

I check this in firefinder and does return nothing (not info that there is zero elements)

然后检查:

h3:nth-child(1)

它返回 h3，所以选择器几乎是好的，但是 this(h3 has text 'a') text 出了问题.

and it returns h3, so selector is almost good, but something with this(h3 has text 'a') text goes wrong.

推荐答案

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

:contains() is not was going to be a CSS3 selector (thanks T.J. Crowder for the link), but it didn't make it, most likely because the way it works tends to lead to severe performance and over-selection issues. For example, if an element E matches :contains() for a given string argument, then all of its ancestors would also match; using it with a universal selector would lead to unexpected results with certain style properties, on top of being slow for the browser.

没有其他 CSS 选择器可以像 :contains() 那样服务.所以你必须找到一些其他的方法，或者通过修改你的 HTML，甚至使用 jQuery 的 :contains()，来达到你想要的效果:

There is no other CSS selector that serves a purpose like :contains(). So you'll have to find some other way, either by modifying your HTML or even by using jQuery's :contains(), to achieve the effect you want:

选择一个 h3 元素
如果它是其父母的第一个孩子
并且其文本包含字母a".

Select an h3 element
if it is the first child of its parent
and its text contains the letter 'a'.

对于 jQuery 和 Selenium RC 用户: :contains() 在 jQuery 使用的 Sizzle 选择器引擎中实现，Selenium RC 中也使用了该引擎(但 不是 Selenium WebDriver).它的工作原理与 在这个十年前的修订版中描述的一样CSS3 规范，但同样，由于规范的描述方式，您需要谨慎使用它，否则可能会导致意外选择.

For jQuery and Selenium RC users: :contains() is implemented in the Sizzle selector engine used by jQuery, which is also used in Selenium RC (but not Selenium WebDriver). It works as described in this decade-old revision of the CSS3 spec, but again, due to how the spec describes it, you need to use it with care or it may lead to unexpected selections.

最后一点，h3:nth-child(1) 可以替换为 h3:first-child，它作为 CSS2 选择器具有更好的浏览器支持.

On a final note, h3:nth-child(1) can be replaced with h3:first-child, which as a CSS2 selector has better browser support.

这篇关于为什么选择器 h3:nth-child(1):contains('a') 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！