내 하위 선택기가 표 셀의 스타일을 지정하지 못하는 이유는 무엇입니까?

테이블 구조의 하위 선택기 및 하위 선택기

HTML 문서에서 요소를 선택할 때 개발자는 하위 선택기(>)를 사용하여 다음을 수행하는 경우가 많습니다. 중첩된 요소를 대상으로 하려면 직계 하위 항목 및 하위 항목 선택자를 대상으로 합니다. 그러나 하위 선택기가 예기치 않게 실패하는 것처럼 보이는 시나리오도 있습니다.

다음 예를 고려하세요.

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

첫 번째 규칙은 모든 내의 요소

혼란은

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

이 수정된 구조에서

이 문제를 해결하려면 개발자는 tbody 요소를 명시적으로 선택해야 합니다.

table > tbody > tr > td {
  background-color: blue;
}

이렇게 하면 하위 선택기가 올바른 항목을 대상으로 지정하게 됩니다. 수정된 구조의 요소입니다. 또한 HTML 문서에 tbody 요소를 명시적으로 추가하면 동일한 선택기를 사용할 수 있습니다.

위 내용은 내 하위 선택기가 표 셀의 스타일을 지정하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!