Warum gibt „input:not(:empty)“ immer keine Ergebnisse zurück?

Den :not(:empty) CSS-Selektor verstehen

Der :empty CSS-Selektor ist so konzipiert, dass er Elemente abgleicht, die keine untergeordneten Elemente enthalten. Bei Verwendung in Kombination mit dem :not()-Selektor kann es jedoch zu unerwartetem Verhalten kommen.

Der Fall von Eingabeelementen

Der HTML-Code Das Element wird als „void-Element“ betrachtet, was bedeutet, dass es keine untergeordneten Elemente hat. Daher wird der :empty-Selektor immer erfüllt, unabhängig davon, ob er einen Textwert enthält oder nicht.

Bei Verwendung von input:not(:empty) fragen Sie im Wesentlichen nach Elementen, die sowohl leer als auch leer sind nicht leer. Dies ist ein Widerspruch, weshalb der Selektor niemals Ergebnisse zurückgibt.

Auswirkungen auf das CSS-Styling

Dieses Verhalten hat Auswirkungen auf das CSS-Styling. Sie können input:not(:empty) nicht verwenden, um Eingabefelder basierend darauf, ob sie leer sind oder nicht, dynamisch zu formatieren.

Alternative Lösungen

Um anfänglich leere Eingaben zu formatieren Für Felder können Sie Selektoren wie input[value=""] oder input:not([value]) verwenden. Sobald ein Benutzer jedoch Text in das Feld eingibt, stimmt dieser nicht mehr mit diesen Selektoren überein.

Das obige ist der detaillierte Inhalt vonWarum gibt „input:not(:empty)“ immer keine Ergebnisse zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!