为什么选择器h3：nth-​​child（1）：contains（'a'）不工作？ [英] Why doesn't the selector h3:nth-child(1):contains('a') work?

问题描述

我检查此选择器：

  h3：nth-​​child（1）：contains（'a'）
 
 
 
 
我选中此选项（不包含零元素的信息）
 
 
 
然后检查：
  h3：nth-​​child（1）
  
所以选择器几乎是好的，但是有这样的东西（h3有文本'a'）文本出错。
解决方案
 ：contains（） 不是会成为CSS3选择器（感谢TJ Crowder的链接，但它没有，它很可能是因为它的工作原理往往导致严重性能和过度选择问题。例如，如果对于给定的字符串参数，元素 E 与：contains（）匹配，它的祖先也将匹配;使用通用选择器会导致某些样式属性出现意外的结果，除非浏览器运行缓慢。
 
 
 
没有其他的CSS选择器如：contains（）。所以你必须找到一些其他的方式，通过修改你的HTML或甚至使用jQuery的：contains（），以实现你想要的效果：
 
 
选择一个 h3 元素
 
如果它是它的第一个子父项
 
，其文本包含字母'a'。
 
 
 对于jQuery和Selenium RC用户： c： c： ：  在Sizzle选择器引擎中使用的jQuery， Selenium WebDriver）。它按照在此十年的修订版CSS3规范，但是再次，由于规范如何描述它，您需要小心使用它，否则可能导致意外的选择。
 
 
 
在最后注释 h3：nth-​​child（1）可以替换为 h3：first-child  CSS2选择器有更好的浏览器支持。
 
I check this selector:
h3:nth-child(1):contains('a') 
selector doesn't work?

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

Then check this:
h3:nth-child(1)
and it returns h3, so selector is almost good, but something with this(h3 has text 'a') text goes wrong.
解决方案
: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.

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:

  
Select an h3 element

  if it is the first child of its parent

  and its text contains the letter 'a'.
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.

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屋！