为什么选择器 h3:nth-child(1):contains('a') 不起作用? [英] Why doesn't the selector h3:nth-child(1):contains('a') work?
问题描述
我检查了这个选择器:
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
h3element
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') 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
