내 CSS 하위 선택기가 깊게 중첩된 요소에서 작동하지 않는 이유는 무엇입니까?

CSS 하위 선택자: 왜 하위 항목을 직접 선택할 수 없나요?

CSS에서 하위 선택자(>)는 직접 선택자를 나타냅니다. 요소 간의 부모-자식 관계. 그러나 하위 항목의 하위 항목에 하위 선택기를 적용하면 실패할 수 있습니다. 다음 예를 고려하십시오.

table > tr > td

td 요소는 tr 요소의 직계 하위이고 tr은 테이블 요소의 직계 하위이므로 이 선택기는 td 요소를 올바르게 선택합니다. 그러나 다음 선택기는 실패합니다.

table > tr > td

누락된 tbody 요소 이해

HTML 문서는 명시적으로 정의되지 않는 한 tr 요소를 포함하는 tbody 요소를 암시적으로 생성합니다. 따라서 tr은 테이블의 직접적인 하위 항목이 아니므로 하위 선택자에서 요구하는 직접적인 상위-하위 관계를 깨뜨립니다.

해결책: tbody 선택자 추가

이 문제를 해결하려면 테이블과 테이블 사이의 간격을 메우기 위해 tbody 선택기를 추가해야 합니다. tr:

table > tbody > tr > td

XHTML 문서에 대한 의미

application/xhtml xml로 제공되는 XHTML 문서는 암시적 tbody 요소를 생성하지 않습니다. 따라서 위의 선택기는 이 컨텍스트에서 여전히 실패합니다. tbody 요소를 명시적으로 추가하거나 다른 접근 방식을 사용해야 합니다.

위 내용은 내 CSS 하위 선택기가 깊게 중첩된 요소에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!