텍스트가 있는 입력 필드에 :not(:empty)가 작동하지 않는 이유는 무엇입니까?

:not(:empty) CSS 선택기가 작동하지 않음

:not(:empty) 선택기가 텍스트 콘텐츠가 있는 입력 필드를 대상으로 지정하지 못함 . 이 문제는 여러 선택기, 특히 :not(:empty):not(:focus):invalid를 결합할 때 발생합니다. :not(:empty)를 제거하면 문제가 해결되지만 :not() 내에서 사용하면 일관성이 없어 보입니다.

명확하게 설명하자면 :empty 선택기는 하위 노드가 없는 요소를 나타냅니다. 입력 요소의 맥락에서 여기에는 텍스트 콘텐츠가 없는 요소가 포함됩니다. 그러나 HTML 정의는 입력 요소를 void로 분류합니다. 이는 본질적으로 비어 있음을 의미합니다.

선택기 사양에 명시된 대로 ":empty 의사 클래스는 자식이 전혀 없는 요소를 나타냅니다." 여기에는 값에 관계없이 입력 요소가 포함되므로 input:not(:empty)는 유효한 HTML에서 아무것도 선택하지 않습니다.

CSS만으로는 빈 입력 필드의 스타일을 동적으로 지정할 수 없지만 [value]를 사용하여 초기에 빈 필드를 대상으로 지정할 수 있습니다. =""] 또는 :not([값])을 사용하여 적절한 초기 상태를 디자인하세요.

위 내용은 텍스트가 있는 입력 필드에 :not(:empty)가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!