Warum funktioniert „input:not(:empty)' nicht wie erwartet?

Enthüllung der Geheimnisse des :not(:empty) CSS-Selektors

Beim Versuch, das Erscheinungsbild leerer oder nicht leerer Eingaben zu steuern Beim Erstellen von Feldern mit dem CSS-Selektor :not(:empty) stoßen viele Entwickler auf unerwartetes Verhalten. Dieser Selektor scheint mit anderen Kombinationen einwandfrei zu funktionieren, führt jedoch zu Anomalien, sobald :not(:empty) zur Mischung hinzugefügt wird.

Die Verwirrung rührt von der Einzigartigkeit der Eingabeelemente her. HTML definiert ungültige Elemente als solche, die „von Natur aus leer sind“, einschließlich der Etikett. Infolgedessen werden alle void-Elemente, unabhängig von ihrem Wertattribut, von der :empty-Pseudoklasse konsistent als leer betrachtet.

Darüber hinaus gibt die Selectors-Spezifikation ausdrücklich an, dass :empty auf Elemente ohne untergeordnete Knoten abzielt, einschließlich Textinhalt. Folglich fehlen Eingabefeldern, obwohl sie einen Wert haben, immer untergeordnete Knoten und sie stimmen daher mit dem :not(:empty)-Selektor überein.

Zusammenfassend lässt sich sagen, dass die Verwendung von input:not(:empty) in einem richtigen HTML erfolgt Das Dokument wird immer mit nichts übereinstimmen. Diese Einschränkung ergibt sich aus der inhärenten Natur von void-Elementen in HTML und der Definition der :empty-Pseudoklasse in CSS-Selektoren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „input:not(:empty)' nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!