왜 `DIV.section DIV:first-child`는 첫 번째 직계 하위 항목에만 스타일을 지정하지 않습니까?

직접 하위 선택기 특이성

CSS를 HTML 요소에 적용할 때 선택기의 특이성을 이해하는 것이 중요합니다. 귀하의 시나리오에서 선택기 DIV.section DIV:first-child는 "하위 콘텐츠 1"과 "헤더" div 모두의 스타일을 지정하는 것으로 보입니다.

그러나 선택기는 첫 번째 직계 하위 항목만 일치시키도록 고안되었습니다. 클래스가 "섹션"인 div의 것입니다. 원래 선택기가 예상대로 작동하지 않는 이유를 분석해 보겠습니다.

직접 하위 항목과 직계 하위 항목 이해

:first-child 의사 클래스는 첫 번째 하위 항목을 선택합니다. 요소의. 그러나 귀하의 경우 이를 DIV.section DIV에 적용합니다. 이는 "'섹션' 클래스가 있는 div의 하위 항목인 모든 div 선택"을 의미합니다. 여기에는 직계 하위 항목과 중첩 하위 항목이 모두 포함됩니다.

직접 하위 항목 선택기 사용

"섹션" 클래스가 있는 div의 첫 번째 직계 하위 항목만 대상으로 지정하려면 직계 후손 선택자(>)를 사용해야 합니다. 이 연산자는 특정 상위 요소의 직계 하위 요소와 일치합니다. 수정된 선택기는 다음과 같습니다.

div.section > div:first-child

이 선택기는 "섹션" 클래스가 있는 div의 첫 번째 직계 하위이므로 "헤더" div의 스타일만 올바르게 지정합니다.

기존 브라우저 문제

Internet Explorer 등 이전 브라우저에서는 직계 후손 선택기가 지원되지 않습니다. 6. 이러한 브라우저를 지원해야 하는 경우 하위 div에 클래스를 추가하는 등의 대체 방법을 사용해야 할 수도 있습니다.

위 내용은 왜 `DIV.section DIV:first-child`는 첫 번째 직계 하위 항목에만 스타일을 지정하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!