`:first-child`가 중첩된 요소에서 첫 번째 ``를 선택하지 못하는 이유는 무엇이며 어떻게 해결할 수 있습니까?
- Barbara Streisand원래의
- 2024-12-09 10:12:081027검색
:first-child가 특정 경우에 예상 요소와 일치하지 못함
클래스를 사용하여 div 내의 첫 번째 h1 요소를 선택하려고 할 때 "detail_container", :first-child 선택기가 의도한 대로 작동하지 않을 수 있습니다. 이는 다음 예와 같이 h1이 div의 직계 하위 항목이 아닐 때 발생합니다.
<style type="text/css">
.detail_container h1:first-child {
color: blue;
}
</style>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
이 경우 ul 요소가 다음과 같기 때문에 :first-child 선택기가 첫 번째 h1을 선택하지 못합니다. h1이 아닌 div의 첫 번째 자식입니다.
해결 방법 문제
div 내의 위치에 관계없이 첫 번째 h1 요소를 선택하려면 대체 CSS 선택기를 사용할 수 있습니다.
1. :first-of-type
:first-of-type 선택기는 주어진 요소 유형과 일치하는 상위 요소의 첫 번째 하위 항목을 선택합니다. 이 경우 다음과 같이 div의 첫 번째 h1 하위 항목을 선택합니다.
.detail_container h1:first-of-type {
color: blue;
}
2. 클래스 기반 선택
또 다른 접근 방식은 첫 번째 h1에 "first"와 같은 고유한 클래스를 제공한 다음 CSS에서 해당 클래스를 대상으로 지정하는 것입니다.
.detail_container h1.first {
color: blue;
}
이것은 방법은 선택에 대한 더 큰 유연성과 제어를 제공합니다.
위 내용은 `:first-child`가 중첩된 요소에서 첫 번째 ``를 선택하지 못하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.