`input:not(:empty)`가 항상 결과를 반환하지 않는 이유는 무엇입니까?

:not(:empty) CSS 선택기 이해

:empty CSS 선택기는 하위 요소가 없는 요소와 일치하도록 설계되었습니다. 그러나 :not() 선택기와 함께 사용하면 예기치 않은 동작이 발생할 수 있습니다.

입력 요소의 경우

HTML 요소는 "void 요소"로 간주됩니다. 즉, 하위 요소가 없다는 의미입니다. 따라서 텍스트 값이 포함되어 있는지 여부에 관계없이 항상 :empty 선택기를 충족합니다.

input:not(:empty)를 사용하는 경우 본질적으로 비어 있고 비어 있는 요소를 요구하게 됩니다. 비어 있지 않습니다. 이는 모순이므로 선택기가 결과를 반환하지 않습니다.

CSS 스타일링에 대한 의미

이 동작은 CSS 스타일에 영향을 미칩니다. input:not(:empty)을 사용하여 입력 필드가 비어 있는지 여부에 따라 동적으로 스타일을 지정할 수 없습니다.

대체 솔루션

처음에 비어 있는 입력의 스타일을 지정하려면 필드에서는 input[value=""] 또는 input:not([value])와 같은 선택기를 사용할 수 있습니다. 그러나 사용자가 필드에 텍스트를 입력하면 더 이상 이러한 선택기와 일치하지 않습니다.

위 내용은 `input:not(:empty)`가 항상 결과를 반환하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!