HTML 테이블에서 `table > tr > td`가 `td` 요소를 선택하지 않는 이유는 무엇입니까?

tr > td` HTML 테이블에서 `td` 요소를 선택하시겠습니까? " />

HTML 테이블을 사용한 하위 선택기의 한계 이해

HTML에서 테이블 구조는 table, tbody, tr 및 td를 포함한 중첩된 요소로 구성됩니다. 하위 선택자(>)는 특정 요소의 하위 요소와 일치하는 반면, 하위 선택자(>)는 더 구체적이며 요소만 일치합니다.

td가 tr과 table의 자손이라는 사실에도 불구하고 이는 tr의 직접적인 자식일 뿐입니다. 이는 브라우저가 tr을 포함하기 위해 테이블 ​​내에 tbody 요소를 암시적으로 추가하기 때문입니다. 따라서 HTML 테이블의 컨텍스트에서 선택기 테이블 > td; 예상됩니다.

예 및 설명

다음 HTML 코드를 고려하세요.

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

이 예에서 td 요소는 직계 하위 요소가 아닙니다. 브라우저는 표시된 대로 테이블과 tr 요소 사이에 tbody 요소를 암시적으로 추가했습니다. 아래:

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

따라서 하위 선택기를 사용하여 td 요소를 선택하려면 경로에 tbody 요소를 포함해야 합니다.

table > tbody > tr > td

결론

하위 선택자(>)는 요소의 직계 하위에만 일치합니다. HTML 테이블의 경우 td 요소는 table 요소의 자손이지만 브라우저에서 tbody 요소를 암시적으로 추가했기 때문에 직접적인 하위 요소는 아닙니다. 하위 선택기를 사용하여 테이블에서 td 요소를 정확하게 선택하려면 선택 경로에 tbody 요소를 포함해야 합니다.

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