CSS를 사용하여 DIV의 직계 하위 항목만 선택하는 방법은 무엇입니까?

직계 하위 항목에 대한 CSS 선택기

"섹션" 클래스가 있는 DIV의 첫 번째 직계 하위 항목에 CSS를 적용하려고 합니다. 그러나 스타일이 원하는 요소보다 더 많은 영향을 미치는 예기치 않은 동작이 발생했습니다.

사용한 선택기는 "DIV.section DIV:first-child"입니다. 이 선택기는 DIV 내부에 있는 모든 DIV를 "섹션" 클래스와 일치시키고 상위 항목의 첫 번째 하위 항목입니다. 그러나 HTML에서 "하위 콘텐츠 1" DIV는 "섹션" DIV의 첫 번째 하위인 다른 DIV 내에 있으므로 예기치 않은 스타일 적용이 발생합니다.

이 문제를 해결하려면 다음을 사용할 수 있습니다. 더 정확한 선택기:

메인의 두 자녀 모두 DIV:

div.section > div

이 선택기는 ">" 지정된 상위 요소의 직계 하위 요소를 선택하는 기호입니다. 이 경우 "섹션" DIV의 직계 하위 DIV 두 개만 일치합니다.

헤더에만 해당:

div.section > div:first-child

이 선택자 이전 항목을 ":first-child" 의사 클래스와 결합하여 "섹션" DIV의 첫 번째 직접 하위 항목만 선택되도록 합니다. 이는 "헤더" DIV만을 대상으로 합니다.

">" 기호는 IE6을 제외한 모든 주요 브라우저에서 지원됩니다. IE6 지원이 중요한 경우 하위 DIV에 클래스를 추가하고 직접 스타일을 지정하는 등의 대체 접근 방식을 사용해야 할 수도 있습니다.

위 내용은 CSS를 사용하여 DIV의 직계 하위 항목만 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!