jQuery は本当にすべての CSS3 セレクターをサポートしていますか? :nth-last-child() とその先の謎。

jQuery の CSS3 セレクター サポートの解明: :nth-last-child() とその先の謎を解く

jQuery は CSS 配列のサポートを誇っていますが、セレクターの CSS3 機能に戸惑うかもしれません。そのような例の 1 つは、:nth-last-child() セレクターです。これは、Firefox、Chrome、IE 9 などの最新のブラウザーで動作するようですが、不思議なことに公式ドキュメントには記載されていません。

jQuery のセレクター アーキテクチャ

jQuery のセレクター実装は 2 つのアプローチに依存しています。最初はネイティブの 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 ベースの実施形態。
• 動的pseudo-classes: :hover、:active、:focus などのイベントベースの疑似クラスはサポートされていません。代わりに、要素がこれらの状態に出入りするときにコードを実行するには、イベント ハンドラーを使用する必要があります。
• 名前空間プレフィックス: jQuery は CSS での名前空間を処理しません。

jQuery 1.9 で導入されたセレクター

付きjQuery 1.9 では、さまざまなレベル 3 セレクターが利用可能になりました。以下を含む:

• :target
• :root
• :nth-last-child()
• :nth-of-type()
• :nth-las t-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 中国語 Web サイトの他の関連記事を参照してください。