"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 내 하위 선택기가 표 셀의 스타일을 지정하지 못하는 이유는 무엇입니까?

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

2024년 12월 21일에 게시됨
검색:399

Why Does My Child Selector Fail to Style Table Cells?

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

HTML 문서에서 요소를 선택할 때 개발자는 종종 하위 선택기(>)를 사용하여 대상을 지정합니다. 자식 및 자손 선택자가 중첩된 요소를 대상으로 하도록 지시합니다. 그러나 하위 선택기가 예기치 않게 실패하는 것처럼 보이는 시나리오가 있습니다.

다음 예를 고려하십시오.

table tr td {
  background-color: red;
}

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

첫 번째 규칙은

요소 내 요소 내의 모든 의 하위이기 때문에 가정할 수 있습니다. ,
요소를 성공적으로 선택합니다. 그러나 하위 선택기(>)를 사용하는 두 번째 규칙은 모든 요소의 스타일을 지정하지 못합니다.

이 동작에 당황한 개발자는

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

혼란은 HTML에

요소가 암시적으로 포함되어 있기 때문에 발생합니다. 기본적으로 브라우저는 요소를 포함하기 위해 요소를 삽입합니다. 결과적으로 실제 요소 구조는 다음과 같습니다.

이 수정된 구조에서

은 더 이상 의 직접적인 하위 항목이 아니라 오히려
의 하위 항목인 의 하위 항목입니다. 따라서 > 선택기는 의 직계 하위 항목이 아니기 때문에
를 타겟팅할 수 없습니다.

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

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

이는 하위 선택기가 수정된 구조에서 올바른 요소를 대상으로 지정하도록 보장합니다. 또한 tbody 요소가 HTML 문서에 명시적으로 추가되면 동일한 선택기를 사용할 수 있습니다.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3