Warum stimmt „input:not(:empty)“ nie mit irgendeinem Element überein?

Den :not(:empty) CSS-Selektor verstehen

Der :not()-Selektor negiert die in seinen Klammern angegebenen Übereinstimmungskriterien. Bei Anwendung auf die Pseudoklasse :empty sollte der Selektor :not(:empty) auf Elemente abzielen, die nicht leer sind. Allerdings sind Benutzer bei der Verwendung dieser Kombination auf Schwierigkeiten gestoßen.

Das Void-Element-Problem

Die Das Element ist ein leeres Element, das heißt, es hat keinen Inhalt. Gemäß der HTML-Definition von „leer“ gelten leere Elemente immer als leer. Dies bedeutet, dass sie immer mit der :empty-Pseudoklasse übereinstimmen, unabhängig davon, ob sie einen Wert haben.

Auswirkungen der Selector-Spezifikation

Die Selectors-Spezifikation stellt weiter klar, dass die Die Pseudoklasse :empty sucht nach Elementen ohne untergeordnete Knoten oder Inhaltsknoten mit einer Länge ungleich Null. Daher wird die Kombination von input:not(:empty) niemals mit einem Element in einem gültigen HTML-Dokument übereinstimmen.

Alternative Lösungen

Leeres Das dynamische Erstellen von Feldern mithilfe von CSS allein kann eine Herausforderung darstellen. Es ist jedoch möglich, zunächst leere Felder auszuwählen, denen ein Wertattribut fehlt (input[value=""]) oder die ein leeres Wertattribut haben (input:not([value])). Über diese Optionen hinaus sind möglicherweise alternative Methoden erforderlich, um die Formatierung leerer Felder.

Das obige ist der detaillierte Inhalt vonWarum stimmt „input:not(:empty)“ nie mit irgendeinem Element überein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!