Warum schlägt mein CSS-Selektor „:not()' fehl und wie kann ich das Problem beheben?

Warum der :not()-Selektor in CSS fehlschlägt

Obwohl der :not()-Selektor von jQuery CSS3-Konformität behauptet, weicht er erheblich vom Standard ab :not() Selektor in CSS.

jQuery Erweiterung

Während der Standard :not() nur einen einzelnen einfachen Selektor als Argument akzeptiert, erlaubt jQuery jeden beliebigen Selektor, einschließlich Listen von durch Kommas getrennten Selektoren.

CSS-Einschränkungen

Im Gegensatz dazu ist der Standard :not() streng Einschränkungen:

• Komma-getrennte Selektoren können nicht übergeben werden
• Einfache Selektoren können nicht zu zusammengesetzten Selektoren kombiniert werden
• Kombinatoren können nicht verwendet werden (z. B. Leerzeichen)

Ursache Fehler

Im gegebenen Szenario hat die CSS-Änderung versucht, das :not()-Verhalten von jQuery zu replizieren, was aus folgenden Gründen kein gültiges CSS ist:

• Dividieren durch Komma (z. B. :not(.alpha, .beta, .gamma)) ist nicht zulässig.
• Kombination übergeben Selektoren (z. B. body > div) sind innerhalb von :not() ungültig.

Pure CSS Workaround

Um das gewünschte Ergebnis in reinem CSS zu erzielen, Es ist notwendig, mehrere :not()-Selektoren zu verketten:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

Dieser Ansatz ist jedoch fehleranfälliger und inkonsistent als die erweiterte :not()-Syntax von jQuery.

Zukünftige Entwicklungen

Selectors 4 erweitert :not() um eine durch Kommas getrennte Liste komplexer Selektoren, was der Fall ist Richten Sie es an jQuery aus und machen Sie es in Zukunft vielseitiger.

Das obige ist der detaillierte Inhalt vonWarum schlägt mein CSS-Selektor „:not()' fehl und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!