CSS에서 `table > tr > td`가 예상대로 테이블 셀을 선택하지 않는 이유는 무엇입니까?

tr > td` CSS에서 예상대로 테이블 셀을 선택하시겠습니까? " />

테이블 구조에 대한 하위 선택기의 제한 사항 이해

HTML 문서 구조에서 table > tr > td 요소 간의 관계는 종종 부모-자식으로 가정됩니다. 그러나 CSS 선택기를 사용할 때 하위 선택기(>)가 예기치 않게 작동하는 이유를 이해하는 것이 중요합니다.

> tr > td 선택기는 tr 요소의 직계 후손인 td 요소를 선택해야 하는 것처럼 보일 수 있지만 실제 HTML 구조에서는 이 요소가 바로 테이블 요소의 직계 후손입니다. , 브라우저는 암시적으로 추가 tbody 요소를 도입합니다.

이는 실제 계층 구조가 다음과 같다는 것을 의미합니다. this:

table > tbody > tr > td

결과적으로 선택기 테이블 > tr > tr 요소는 테이블 요소의 직접적인 하위 항목이 아니기 때문에 작동하지 않습니다.

이 시나리오에서 td 요소를 올바르게 선택하려면 다음을 사용해야 합니다. 선택기:

table > tbody > tr > td

데모:

제공된 Fiddle에서 [하위 항목 선택기](http://jsfiddle.net/brLee/1/) , tr > td 선택기는 예상대로 작동하여 tr 요소 내의 모든 td 요소를 선택합니다. 이는 하위 선택자(>)가 간접적으로 관련된 요소를 포함하여 지정된 요소의 모든 하위 항목을 선택하기 때문입니다.

반대로, 제공되는 Fiddle [하위 선택자](http://jsfiddle.net/ brLee/), 테이블 > TR > td는 tr 요소가 table 요소의 직접적인 하위 요소가 아니기 때문에 어떤 td 요소도 선택하지 않습니다.

브라우저 동작:

HTML 문서에서 암시적 추가 tbody 요소의 동작은 테이블의 적절한 렌더링을 보장하기 위한 브라우저의 기본 동작입니다. 그러나 application/xhtml xml로 제공되는 XHTML 문서에서는 이러한 암시적 추가가 발생하지 않습니다. 따라서 테이블 >에 대해 하위 선택기(>)를 사용합니다. TR > XHTML 문서의 td는 올바르게 작동합니다.

위 내용은 CSS에서 `table > tr > td`가 예상대로 테이블 셀을 선택하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!