`input:not(:empty)`가 예상대로 작동하지 않는 이유는 무엇입니까?

:not(:empty) CSS 선택기의 미스터리 공개

비어 있거나 비어 있지 않은 입력의 모양을 제어하려고 할 때 :not(:empty) CSS 선택기를 사용하는 필드에서 많은 개발자가 예상치 못한 동작을 경험하게 됩니다. 이 선택기는 다른 조합과 완벽하게 작동하는 것처럼 보이지만 혼합에 :not(:empty)가 추가되면 예외가 발생합니다.

혼란은 입력 요소의 고유한 특성에서 비롯됩니다. HTML은 요소를 포함하여 void 요소를 "본질상 비어 있는" 요소로 정의합니다. 꼬리표. 결과적으로 모든 void 요소는 값 속성에 관계없이 :empty 의사 클래스에 의해 일관되게 비어 있는 것으로 간주됩니다.

또한 선택기 사양에는 :empty가 다음을 포함하여 하위 노드가 없는 요소를 대상으로 한다고 명시적으로 명시되어 있습니다. 텍스트 내용. 결과적으로 입력 필드는 값이 있음에도 불구하고 항상 하위 노드가 부족하므로 :not(:empty) 선택기와 일치합니다.

요약하자면, 적절한 HTML에서 input:not(:empty)를 사용하는 것입니다. 문서는 항상 어떤 것과도 일치하지 않습니다. 이러한 제한은 HTML의 void 요소 고유 특성과 CSS 선택기의 :empty 의사 클래스 정의로 인해 발생합니다.

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