jQuery 真的支援所有 CSS3 選擇器嗎？ :nth-last-child() 之謎及其他。

解開jQuery 的CSS3 選擇器支援：揭秘:nth-last-child() 及其他

雖然jQuery 擁有對CSS 數組的支援選擇器，它的CSS3 功能可能會讓您感到困惑。一個這樣的例子是 :nth-last-child() 選擇器，它似乎可以在 Firefox、Chrome 和 IE 9 等現代瀏覽器中運行，但奇怪的是官方文件中卻沒有。

jQuery 的選擇器架構

jQuery 的選擇器實作依賴雙管齊下的方法。它最初嘗試利用本機 document.querySelectorAll() 方法，提供與最新 CSS 選擇器的兼容性。如果這種方法失敗，jQuery 會依靠它自己的選擇器庫 Sizzle。

此策略對 :nth-last-child() 在某些瀏覽器中的明顯功能提供了解釋。作為有效的 CSS 選擇器，支援 document.querySelectorAll() 的瀏覽器（例如​​ Firefox、Chrome 和 IE 9）可以直接處理它並返回適當的節點列表，有效繞過 Sizzle。

揭秘支援的CSS3 選擇器

從jQuery 1.9 開始，Sizzle（jQuery 的選擇器庫）幾乎支援選擇器等級3 標準中定義的所有CSS3 選擇器，但有一些值得注意的例外：

• 偽元素：明確選擇是不可能的，因為它們基於CSS 的體現作為文檔樹的抽象。
• 動態偽類：基於事件不支援 :hover、:active 和 :focus 等偽類。相反，必須使用事件處理程序在元素進入和離開這些狀態時執行程式碼。
• 命名空間前綴： jQuery 不處理 CSS 中的命名空間。

jQuery 1.9 中引入的選擇器

在jQuery 1.9 中，一系列3 級選擇器變得可用，包括：

• :target
• ： root
• :nth-last-child()
• :nth-of-type()
• :nthth -last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type

相容性注意事項

jQuery 1.8 及更早版本缺乏對上述選擇器以及CSS2 選擇器:lang() 的支援。

:nth-last-child() 的情況

在使用:nth-last-child() 的範例中，Firefox、Chrome 和IE 9 成功處理了選擇器，因為這些瀏覽器支援document.querySelectorAll()。但是，IE 8 模擬模式會失敗，因為它不支援 :nth-last-child()。由於 jQuery/Sizzle 也沒有實作這個選擇器，所以沒有後備機制，導致失敗。

彌合差距

如果無法升級到 jQuery 1.9 或更高版本，您可以考慮使用 jQuery 的自訂選擇器擴充功能來實現缺少的偽類。值得注意的是，jQuery 1.9 提供了與舊版 IE 的兼容性，同時也加入了對上述選擇器的支援。

以上是jQuery 真的支援所有 CSS3 選擇器嗎？ :nth-last-child() 之謎及其他。的詳細內容。更多資訊請關注PHP中文網其他相關文章！