Heim >Web-Frontend >CSS-Tutorial >Warum funktioniert :not(:empty) nicht für Eingabefelder mit Text?

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

DDD
DDDOriginal
2024-11-04 15:00:33334Durchsuche

Why Doesn't :not(:empty) Work for Input Fields with 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn