하위 선택자 대 하위 선택자: 하위 선택자는 언제 실패합니까?

CSS의 하위 선택자 및 하위 선택자

CSS에서 하위 선택자(>)는 부모-자식 관계를 나타내고 하위 선택자(> 공백 포함)은 상위 요소 내의 모든 하위 요소를 대상으로 합니다. 두 선택기를 모두 사용하여 특정 요소를 선택할 수 있지만 사용법에는 특정 제한이 있습니다.

주어진 예에서 tr td 테이블을 선택하면 td가 tr의 직계 하위이고 tr이기 때문에 td 요소를 올바르게 검색합니다. 테이블의 직계 자식입니다. 그러나 table > TR > 동일한 요소를 대상으로 지정하려고 하면 선택기가 실패합니다.

이 동작은 특정 요소에 대한 응답으로 브라우저에서 생성된 HTML 구조에서 비롯됩니다. 브라우저는 자동으로 테이블 요소 내에 암시적 tbody 요소를 추가하여 tr 요소를 묶습니다. 이는 부모-자식 관계에서 tr이 테이블 내에 직접 중첩되지 않음을 의미합니다. 대신 tbody 요소 내에 있습니다.

따라서 의도한 대로 td 요소를 선택하려면 암시적 tbody 요소를 설명하는 다음 선택기를 사용해야 합니다.

table > tbody > tr > td

포함하여 선택기에서 tbody를 사용하면 적절한 부모-자식 관계를 탐색하고 td를 정확하게 타겟팅합니다. 요소.

따라서 이 시나리오에서는 브라우저에서 추가한 암시적 tbody 요소로 인해 하위 선택기가 원하는 요소를 올바르게 선택할 수 없지만 하위 선택기는 예상대로 작동합니다.

위 내용은 하위 선택자 대 하위 선택자: 하위 선택자는 언제 실패합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!