Warum funktioniert :not(:empty) nicht für Eingabefelder mit Text?

:not(:empty) CSS-Selektor funktioniert nicht

Der :not(:empty)-Selektor zielt nicht auf Eingabefelder mit Textinhalt ab . Dieses Problem tritt auf, wenn mehrere Selektoren kombiniert werden, insbesondere :not(:empty):not(:focus):invalid. Das Entfernen von :not(:empty) löst das Problem, aber die Verwendung innerhalb von :not() scheint inkonsistent zu sein.

Zur Verdeutlichung: Der :empty-Selektor zeigt Elemente ohne untergeordnete Knoten an. Im Kontext von Eingabeelementen zählen hierzu auch solche ohne Textinhalt. Die HTML-Definition klassifiziert Eingabeelemente jedoch als ungültig, was bedeutet, dass sie von Natur aus leer sind.

Wie in der Selectors-Spezifikation angegeben, „stellt die Pseudoklasse:empty ein Element dar, das überhaupt keine untergeordneten Elemente hat.“ Dazu gehören Eingabeelemente unabhängig von ihrem Wert, sodass input:not(:empty) praktisch nie etwas in gültigem HTML auswählt.

Während CSS allein leere Eingabefelder nicht dynamisch formatieren kann, können Sie anfänglich leere Felder mit [Wert] ansprechen =""] oder :not([Wert]), um geeignete Anfangszustände zu entwerfen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert :not(:empty) nicht für Eingabefelder mit Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!