為什麼我的 CSS 選擇器 `h3:nth-child(1):contains(\'a\')` 不工作？

CSS 選擇器故障排除：h3:nth-child(1):contains('a') 不工作

本文解決了該問題CSS 選擇器h3:nth-child(1):contains('a')沒有回傳任何結果，儘管它是預期的

即使元件選擇器 h3:nth-child(1) 檢索到目標元素，在使用 :contains() 函數時也會出現問題。 :contains() 選擇器原本是一個 CSS3 選擇器，但最終沒有包含在最終規範中。

非功能性原因

由於架構:contains() 與通用選擇器結合使用或用於特定樣式屬性會帶來效能挑戰。選擇器往往不僅會傳回符合的元素，還會傳回其祖先元素，導致意外的選擇。

替代方法

因為沒有與:contains( 等效的CSS 選擇器），需要替代方法：

• HTML修改： 更新HTML 結構以分隔要選取的元素。
• jQuery 的 :contains(): 利用 jQuery 的 :contains() 函數來實現其支援的用法。

jQuery 和Selenium RC 使用者

• jQuery 的 :contains() 函數是基於早期 CSS3 規範實現的。
• 使用時請謹慎操作，避免出現不可預見的結果。

替代語法h3:nth-child(1)

最後一點，選擇器h3:nth-child(1) 可以使用CSS2 標準表示為h3:first-child ，從而提高瀏覽器相容性。

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