`:first-child`가 내 H1을 선택하지 않는 이유는 무엇입니까?

왜 :first-child가 예상 H1을 선택하지 않는가?

제시된 시나리오에서 목표는 첫 번째 h1 요소에 색상을 지정하는 것입니다. Detail_container blue 클래스가 있는 div 내. 사용된 CSS(:first-child)는 대상 요소가 부모의 첫 번째 자식이라고 가정하지만, 이 경우 부모의 첫 번째 자식은 ul 요소입니다.

:first-child 이해하기

:first-child 선택기는 지정된 기준과 일치하는 지정된 상위 요소의 첫 번째 하위 요소를 선택합니다. 제공된 코드에서 기준은 "h1"이지만 div의 첫 번째 하위 항목이 ul이므로 :first-child 선택기는 h1 요소에 적용되지 않습니다.

다음을 사용하는 대체 솔루션 :first-of-type

CSS3에는 해당 요소 유형 내에서 처음으로 나타나는 요소 유형을 선택하는 :first-of-type 선택기가 도입되었습니다. 부모. 이 시나리오에서는 :first-child를 :first-of-type으로 바꾸면 문제가 해결됩니다.

.detail_container h1:first-of-type {
  color: blue;
}

브라우저 호환성 고려 사항

그러나 :first- of-type은 :first-child에 비해 브라우저 호환성이 제한적입니다.

다음을 사용하는 권장 솔루션 클래스

보다 실용적이고 브라우저 간 호환 가능한 솔루션은 대상 h1 요소에 클래스를 할당하고 그에 따라 스타일을 지정하는 것입니다.

.detail_container h1.first {
  color: blue;
}

위 내용은 `:first-child`가 내 H1을 선택하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!