집 >웹 프론트엔드 >CSS 튜토리얼 >내 하위 선택기가 표 셀의 스타일을 지정하지 못하는 이유는 무엇입니까?

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

Barbara Streisand원래의: 2024-12-08 19:24:10642검색

Why Does My Child Selector Fail to Style Table Cells?

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

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

다음 예를 고려하세요.

table tr td {
  background-color: red;
}

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

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

내의 요소 강요. 그러나 하위 선택기(>)를 사용하는 두 번째 규칙은 의 하위이고, 이는

이러한 동작에 당황한 개발자는

의 하위인 경우 하위 선택자가 적용되어야 합니다.

혼란은

HTML의 요소. 기본적으로 브라우저는 를 포함하는 요소 강요. 결과적으로 실제 요소 구조는 다음과 같습니다.

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

이 수정된 구조에서

은(는) 더 이상

의 직접적인 하위 항목이 아니라 오히려 자체가

의 하위 항목인 의 하위 항목입니다. 따라서 > 선택기가 의 직계 하위 항목이 아니기 때문입니다.

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

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

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

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

html if select default this table tbody td tr issue

성명：

이전 기사：브라우저 간 호환성을 위해 CSS `배경 이미지`를 올바르게 사용하는 방법은 무엇입니까?다음 기사：브라우저 간 호환성을 위해 CSS `배경 이미지`를 올바르게 사용하는 방법은 무엇입니까?