為什麼 `h3:nth-child(1):contains(\'a\')` 不選擇第一個包含 \'a\' 的？

為什麼 h3:nth-child(1):contains('a') 失敗？

嘗試選擇第一個h3 元素包含文字“a”，正在使用選擇器 h3:nth-child(1):contains('a')。但是，此選擇器不會產生所需的結果。

說明：

CSS3 選擇器 :contains() 從未作為標準實現，因此在主要瀏覽器中。此選擇器旨在匹配包含特定文字的元素，但其實作會因為匹配該元素的所有祖先而導致效能問題。

替代解決方案：

由於:contains() 不可用，另一種方法是必需：

• 修改HTML： 重新排列HTML 結構，將所需的h3 元素放置在不同的位置。
• 使用jQuery： jQuery 提供了自己的:contains() 選擇器，可以用作如下：

$("h3:first").filter(function() {
  return $(this).text().indexOf("a") >= 0;
});

注意事項：

• 對於jQuery 和Selenium RC，支持 :contains() 但可能會導致意外選擇，因為匹配祖先。
• 可以使用 CSS2 選擇器 h3:first-child h3:nth-child(1) 以獲得更好的瀏覽器支援。

以上是為什麼 `h3:nth-child(1):contains(\'a\')` 不選擇第一個包含 \'a\' 的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！