내 h1 요소에서 :first-child 선택기가 작동하지 않는 이유는 무엇입니까?

:first-child Selector가 원하는 요소를 선택하지 않음

클래스 이름이 "인 div 내에서 첫 번째 h1 요소를 선택하려고 할 때 Detail_container," 일부 사용자는 예상치 못한 동작을 경험할 수 있습니다. 의도된 CSS 규칙인 ".detail_container h1:first-child"는 h1 요소가 div의 첫 번째 하위 요소가 아닌 경우 실패합니다.

이 문제는 :first-child 선택기가 첫 번째 요소에 적용되기 때문에 발생합니다. 상위 요소의 직계 하위 요소입니다. 제공된 예에서 h1 요소가 ul 목록 뒤에 오는 경우 Detail_container div의 첫 번째 하위 항목은 h1이 아닌 ul입니다. 결과적으로 :first-child 선택기는 h1과 일치하지 않습니다.

이 문제를 해결하려면 대신 :first-of-type 선택기를 사용하는 것이 좋습니다. 이 선택자는 첫 번째 자식인지 여부에 관계없이 부모 내에서 지정된 유형의 첫 번째 요소와 일치합니다. 다음 CSS 규칙은 div 내의 첫 번째 h1 요소를 선택합니다.

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

그러나 브라우저 호환성 제한으로 인해 첫 번째 h1 요소에 대해 지정된 클래스를 사용하고 대신 해당 클래스를 대상으로 지정하는 것이 좋습니다.

.detail_container h1.first {
    color: blue;
}

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