爲什麼選擇器h3：nth-​​child（1）：包含（'a'）工作？

Question

我檢查這個選擇：

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

選擇不工作？

我在火力發現者檢查並不會返回任何結果（沒有信息存在零元素）

然後檢查：

h3:nth-child(1) 

並返回H3，所以選擇幾乎是很好的事，但與此（h3有文字「a」）文本出錯。

Answer 1

:contains()不將是一個CSS3選擇器（thanks T.J. Crowder for the link），但因爲它的工作方式往往導致嚴重的性能和過度的選擇問題，它並沒有做到，最有可能的。例如，如果元素E對於給定的字符串參數匹配:contains()，那麼的所有祖先也將匹配;在通用選擇器中使用它會導致某些樣式屬性出現意想不到的結果，除此之外瀏覽器速度較慢。

沒有其他的CSS選擇器可用於:contains()之類的用途。所以你必須找到一些其他的方式，通過修改你的HTML，甚至使用jQuery的:contains()，以達到你想要的效果：

選擇一個h3元素
如果它的第一個孩子的父母
及其文本包含字母'a'。

對於jQuery和硒RC用戶：:contains()在由jQuery的，這也是在硒RC中使用的（但不是硒 webdriver的）中使用的選擇器灒發動機實現。它的工作原理與in this decade-old revision of the CSS3 spec一樣，但是由於規範描述的原因，您需要小心使用它，否則可能會導致意外的選擇。

最後一點，h3:nth-child(1)可以替換爲h3:first-child，它作爲CSS2選擇器有更好的瀏覽器支持。

Answer 2

如果你正在嘗試使用:contains(a)找到一個錨標記（而不是字母一個），你可以使用：

h3:nth-child(1) a 

或

h3:first-child a