테이블 구조의 하위 선택기와 하위 선택기
HTML 문서에서 요소를 선택할 때 개발자는 종종 하위 선택기(>)를 사용하여 대상을 지정합니다. 자식 및 자손 선택자가 중첩된 요소를 대상으로 하도록 지시합니다. 그러나 하위 선택기가 예기치 않게 실패하는 것처럼 보이는 시나리오가 있습니다.
다음 예를 고려하십시오.
table tr td { background-color: red; } table > tr > td { background-color: blue; }
첫 번째 규칙은
요소를 성공적으로 선택합니다. 그러나 하위 선택기(>)를 사용하는 두 번째 규칙은 모든 | 요소의 스타일을 지정하지 못합니다. 이 동작에 당황한 개발자는 | 가 |
이 수정된 구조에서
를 타겟팅할 수 없습니다. 이 문제를 해결하려면 개발자는 tbody 요소를 명시적으로 선택해야 합니다. table > tbody > tr > td { background-color: blue; } 이는 하위 선택기가 수정된 구조에서 올바른 요소를 대상으로 지정하도록 보장합니다. 또한 tbody 요소가 HTML 문서에 명시적으로 추가되면 동일한 선택기를 사용할 수 있습니다. |
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3