Unterstützt jQuery wirklich alle CSS3-Selektoren? Das Geheimnis von :nth-last-child() und darüber hinaus.

Entwirrung der CSS3-Selektorunterstützung von jQuery: Entmystifizierung von :nth-last-child() und darüber hinaus

Während jQuery eine Reihe von CSS unterstützt Selektoren, seine CSS3-Funktionen können Sie verwirren. Ein solches Beispiel ist der :nth-last-child()-Selektor, der scheinbar in modernen Browsern wie Firefox, Chrome und IE 9 funktionsfähig ist, aber seltsamerweise in der offiziellen Dokumentation fehlt.

Die jQuery-Selektorarchitektur

Die Selektorimplementierung von jQuery basiert auf einem zweigleisigen Ansatz. Zunächst wird versucht, die native Methode document.querySelectorAll() zu verwenden, um Kompatibilität mit den neuesten CSS-Selektoren zu gewährleisten. Wenn dieser Ansatz fehlschlägt, greift jQuery auf seine eigene Selektorbibliothek Sizzle zurück.

Diese Strategie bietet eine Erklärung für die scheinbare Funktionalität von :nth-last-child() in bestimmten Browsern. Als gültiger CSS-Selektor können Browser, die document.querySelectorAll() unterstützen (wie Firefox, Chrome und IE 9), ihn direkt verarbeiten und die entsprechende Knotenliste zurückgeben, wodurch Sizzle effektiv umgangen wird.

Enthüllung des Unterstützte CSS3-Selektoren

Ab jQuery 1.9 unterstützt Sizzle (jQuerys Selektorbibliothek) praktisch alle im Selectors Level 3-Standard definierten CSS3-Selektoren, mit einigen bemerkenswerten Ausnahmen:

• Pseudoelemente:Explizite Auswahlen sind aufgrund ihrer CSS-basierten Verkörperung als Abstraktionen des Dokumentbaums nicht möglich.
• Dynamische Pseudoklassen:Ereignisbasiert Pseudoklassen wie :hover, :active und :focus werden nicht unterstützt. Stattdessen müssen Ereignishandler verwendet werden, um Code auszuführen, wenn Elemente in diese Zustände eintreten und sie verlassen.
• Namespace-Präfixe: jQuery verarbeitet keine Namensräume in CSS.

In jQuery 1.9 eingeführte Selektoren

Mit jQuery 1.9 wurde eine Reihe von Level-3-Selektoren verfügbar, darunter:

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

Kompatibilitätsvorbehalte

jQuery 1.8 und frühere Versionen unterstützen weder die oben genannten Selektoren noch :lang(), einen CSS2-Selektor.

Der Fall von :nth-last-child()

In Ihrem Beispiel mit :nth-last-child() wird der Selektor erfolgreich von Firefox, Chrome und IE 9 verarbeitet, da diese Browser document.querySelectorAll() unterstützen. Der IE 8-Emulationsmodus schlägt jedoch fehl, da er :nth-last-child() nicht unterstützt. Da jQuery/Sizzle diesen Selektor ebenfalls nicht implementiert, gibt es keinen Fallback-Mechanismus, was zu einem Fehler führt.

Überbrückung der Lücke

In Fällen, in denen ein Upgrade auf jQuery 1.9 oder höher nicht möglich ist, können Sie die fehlenden Pseudoklassen mithilfe der benutzerdefinierten Selektorerweiterungen von jQuery implementieren. Es ist erwähnenswert, dass jQuery 1.9 Kompatibilität mit älteren IE-Versionen bietet und gleichzeitig Unterstützung für die genannten Selektoren bietet.

Das obige ist der detaillierte Inhalt vonUnterstützt jQuery wirklich alle CSS3-Selektoren? Das Geheimnis von :nth-last-child() und darüber hinaus.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!