為什麼 `h3:nth-child(1):contains(\'a\')` 沒有如預期般運作？

選擇器h3:nth-child(1):contains('a') 無效

儘管有明顯的語法，選擇器h3: nth-child(1):contains('a')未能執行其預期

底層

經過進一步調查，發現h3:nth-child(1) 正確地定位了其父容器中的第一個h3元素。但是， h3:nth-child(1):contains('a') 不會產生任何結果，因為 :contains() 選擇器（最初是作為 CSS3 功能）已從 CSS 規範中省略。

： contains() 旨在匹配包含特定文字模式的元素。不幸的是，它的工作方式對瀏覽器效能提出了挑戰，並導致過度選擇問題。例如，使用 :contains() 匹配元素也會匹配其所有祖先，與通用選擇器或某些樣式屬性結合使用時可能會導致意外行為。

替代方法

由於缺乏合適的 CSS 選擇器替代方案，要實現所需的結果需要替代方法。可以探索修改 HTML 結構或利用 jQuery 的 :contains() 實作：

• 選擇 h3 元素作為其父級中的第一個子元素，並且文字包含「a」。

jQuery 或Selenium RC 注意事項

對於jQuery對於Selenium RC 用戶，:contains() 在Sizzle 選擇器引擎中實現，規範與CSS3 規範類似的功能。不過，建議謹慎使用此選擇器，以避免意外選擇。

細化

最後，h3:nth-child(1) 可以替換為 h3 :first-child 作為 CSS2 選擇器增強瀏覽器相容性。

以上是為什麼 `h3:nth-child(1):contains(\'a\')` 沒有如預期般運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！